2016-07-27 101 views
1

I have found This http://jsfiddle.net/YCTDQ/对我来说有用于我的项目实施,但是当我看到有包含库文件,我没有在外部资源中看到,但他们包含在jsfiddle中。我在哪里可以得到这个外部资源

我怎样才能让这两个外部资源正确地工作。

在jsfiddle中,代码显示正确,但iam无法在下面显示的代码段中添加库文件。

$(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>

where

+0

[jQuery的](https://jquery.com/download/)和[jQueryUI的](http://jqueryui.com/download/),下载库或使用CDN和添加根据'

相关问题