Wo kann ich diese externen Ressourcen

Question

I have found This http://jsfiddle.net/YCTDQ/ nützlich für mich für mein Projekt zu implementieren, aber wenn ich sehe, gibt es Bibliotheksdateien enthalten und ich habe nicht in externen Ressourcen gesehen, aber sie sind in der JSFiddle enthalten.

Wie bekomme ich diese 2 externe Ressourcen, um sie richtig zu arbeiten.

In jsfiddle wird der Code korrekt angezeigt, aber iam konnte die Bibliotheksdateien nicht in das unten gezeigte Code-Snippet einfügen.

$(function(){ 
 
    $('select').combobox(); 
 
}); 
 

 
/* 
 
    Combobox widget 
 
    - taken from http://jqueryui.com/autocomplete/#combobox 
 
    - added support for 
 
     - default option 
 
     - combo uses width of original select 
 
     - autoFocus 
 
    - removed 
 
     - tooltips 
 
     - setting value to "" if invalid (instead sets to default) 
 
*/ 
 
(function ($) { 
 
     $.widget("ui.combobox", { 
 
      _create: function() { 
 
       var input, 
 
        that = this, 
 
        wasOpen = false, 
 
        select = this.element.hide(), 
 
        selected = select.children(":selected"), 
 
        defaultValue = selected.text() || "", 
 
        wrapper = this.wrapper = $("<span>") 
 
        .addClass("ui-combobox") 
 
        .insertAfter(select); 
 

 
       function removeIfInvalid(element) { 
 
        var value = $(element).val(), 
 
         matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(value) + "$", "i"), 
 
         valid = false; 
 
        select.children("option").each(function() { 
 
         if ($(this).text().match(matcher)) { 
 
          this.selected = valid = true; 
 
          return false; 
 
         } 
 
        }); 
 

 
        if (!valid) { 
 
         // remove invalid value, as it didn't match anything 
 
         $(element).val(defaultValue); 
 
         select.val(defaultValue); 
 
         input.data("ui-autocomplete").term = ""; 
 
        } 
 
       } 
 

 
       input = $("<input>") 
 
        .appendTo(wrapper) 
 
        .val(defaultValue) 
 
        .attr("title", "") 
 
        .addClass("ui-state-default ui-combobox-input") 
 
        .width(select.width()) 
 
        .autocomplete({ 
 
         delay: 0, 
 
         minLength: 0, 
 
         autoFocus: true, 
 
         source: function (request, response) { 
 
          var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
 
          response(select.children("option").map(function() { 
 
           var text = $(this).text(); 
 
           if (this.value && (!request.term || matcher.test(text))) 
 
            return { 
 
             label: text.replace(
 
             new RegExp(
 
              "(?![^&;]+;)(?!<[^<>]*)(" + 
 
              $.ui.autocomplete.escapeRegex(request.term) + 
 
              ")(?![^<>]*>)(?![^&;]+;)", "gi" 
 
             ), "<strong>$1</strong>"), 
 
             value: text, 
 
             option: this 
 
            }; 
 
          })); 
 
         }, 
 
         select: function (event, ui) { 
 
          ui.item.option.selected = true; 
 
          that._trigger("selected", event, { 
 
           item: ui.item.option 
 
          }); 
 
         }, 
 
         change: function (event, ui) { 
 
          if (!ui.item) { 
 
           removeIfInvalid(this); 
 
          } 
 
         } 
 
        }) 
 
        .addClass("ui-widget ui-widget-content ui-corner-left"); 
 

 
       input.data("ui-autocomplete")._renderItem = function (ul, item) { 
 
        return $("<li>") 
 
         .append("<a>" + item.label + "</a>") 
 
         .appendTo(ul); 
 
       }; 
 

 
       $("<a>") 
 
        .attr("tabIndex", -1) 
 
        .appendTo(wrapper) 
 
        .button({ 
 
         icons: { 
 
          primary: "ui-icon-triangle-1-s" 
 
         }, 
 
         text: false 
 
        }) 
 
        .removeClass("ui-corner-all") 
 
        .addClass("ui-corner-right ui-combobox-toggle") 
 
        .mousedown(function() { 
 
         wasOpen = input.autocomplete("widget").is(":visible"); 
 
        }) 
 
        .click(function() { 
 
         input.focus(); 
 

 
         // close if already visible 
 
         if (wasOpen) { 
 
          return; 
 
         } 
 

 
         // pass empty string as value to search for, displaying all results 
 
         input.autocomplete("search", ""); 
 
        }); 
 
      }, 
 

 
      _destroy: function() { 
 
       this.wrapper.remove(); 
 
       this.element.show(); 
 
      } 
 
     }); 
 
    })(jQuery);

.ui-combobox { 
 
    position: relative; 
 
    display: inline-block; 
 
    } 
 
    .ui-combobox-toggle { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin-left: -1px; 
 
    padding: 0; 
 
    /* support: IE7 */ 
 
    *height: 1.7em; 
 
    *top: 0.1em; 
 
    } 
 
    .ui-combobox-input { 
 
    margin: 0; 
 
    padding: 0.3em; 
 
    }

<select style="width:300px"> 
 
    <option value>-Select a number-</option> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
    <option value="4">Four</option> 
 
    <option value="5">Five</option> 
 
    <option value="6">Six</option> 
 
    <option value="7">Seven</option> 
 
    <option value="8">Eight</option> 
 
    <option value="9">Nine</option> 
 
    <option value="10">Ten</option> 
 
</select>

Letzte Frage

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Verwandte Themen

• Keine verwandten Themen^_^