如何自动完成搜索到jquery选择的插件？

Question

HTML

<select class="chosen" id="company_master" name="company_master" style="width: 400px; display: none;"> 
    <option>--Select--</option> 
</select> 

我曾尝试以下方法，但它不工作：

$('div#company_master_chosen>div>div input').keyup(function(){ 
     console.log("hi"); 
     var keyword = $(this).val(); 
     alert(keyword); 
}); 

我想要做的自动完成搜索jQuery中选择搜索框使用jQuery阿贾克斯，怎么办？如何自动完成在jQuery选择插件执行..

Answer 1

有一个如何做到这一点的例子。请参阅：http://jqueryui.com/autocomplete/#combobox

这里是一个工作示例：https://jsfiddle.net/Twisty/4Lojj5uq/

HTML

<div class="form-item ui-widget"> 
    <label>Select Company:</label> 
    <select class="chosen custom-combobox" id="company_master"> 
    <option></option> 
    <option value="ActionScript">ActionScript</option> 
    <option value="AppleScript">AppleScript</option> 
    <option value="Asp">Asp</option> 
    <option value="BASIC">BASIC</option> 
    <option value="C">C</option> 
    <option value="C++">C++</option> 
    <option value="Clojure">Clojure</option> 
    <option value="COBOL">COBOL</option> 
    <option value="ColdFusion">ColdFusion</option> 
    <option value="Erlang">Erlang</option> 
    <option value="Fortran">Fortran</option> 
    <option value="Groovy">Groovy</option> 
    <option value="Haskell">Haskell</option> 
    <option value="Java">Java</option> 
    <option value="JavaScript">JavaScript</option> 
    <option value="Lisp">Lisp</option> 
    <option value="Perl">Perl</option> 
    <option value="PHP">PHP</option> 
    <option value="Python">Python</option> 
    <option value="Ruby">Ruby</option> 
    <option value="Scala">Scala</option> 
    <option value="Scheme">Scheme</option> 
    </select> 
</div> 
<div class="form-item"> 
</div> 

CSS

.form-item { 
    border-top: 2px solid #ccc; 
    padding: 20px; 
    font-family: arial, san-serif; 
} 

.form-item:last-child { 
    border-bottom: 2px solid #ccc; 
} 

.form-item label { 
    display: inline-block; 
    width: 25%; 
} 

.form-item .custom-combobox { 
    position: relative; 
    display: inline-block; 
} 

.form-item .custom-combobox-toggle { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    margin-left: -1px; 
    padding: 0; 
} 

.form-item .custom-combobox-input { 
    background: #fff; 
    margin: 0; 
    padding: 5px 10px; 
    width: 380px; 
} 

的JavaScript

$(function() { 
    $.widget("custom.combobox", { 
    _create: function() { 
     this.wrapper = $("<span>") 
     .addClass("custom-combobox") 
     .insertAfter(this.element); 

     this.element.hide(); 
     this._createAutocomplete(); 
     this._createShowAllButton(); 
    }, 

    _createAutocomplete: function() { 
     var selected = this.element.children(":selected"), 
     value = selected.val() ? selected.text() : ""; 

     this.input = $("<input>") 
     .appendTo(this.wrapper) 
     .val(value) 
     .attr("title", "") 
     .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left") 
     .autocomplete({ 
      delay: 0, 
      minLength: 0, 
      source: $.proxy(this, "_source") 
     }) 
     .tooltip({ 
      classes: { 
      "ui-tooltip": "ui-state-highlight" 
      } 
     }); 

     this._on(this.input, { 
     autocompleteselect: function(event, ui) { 
      ui.item.option.selected = true; 
      this._trigger("select", event, { 
      item: ui.item.option 
      }); 
     }, 

     autocompletechange: "_removeIfInvalid" 
     }); 
    }, 

    _createShowAllButton: function() { 
     var input = this.input, 
     wasOpen = false; 

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

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

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

    _source: function(request, response) { 
     var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
     response(this.element.children("option").map(function() { 
     var text = $(this).text(); 
     if (this.value && (!request.term || matcher.test(text))) 
      return { 
      label: text, 
      value: text, 
      option: this 
      }; 
     })); 
    }, 

    _removeIfInvalid: function(event, ui) { 

     // Selected an item, nothing to do 
     if (ui.item) { 
     return; 
     } 

     // Search for a match (case-insensitive) 
     var value = this.input.val(), 
     valueLowerCase = value.toLowerCase(), 
     valid = false; 
     this.element.children("option").each(function() { 
     if ($(this).text().toLowerCase() === valueLowerCase) { 
      this.selected = valid = true; 
      return false; 
     } 
     }); 

     // Found a match, nothing to do 
     if (valid) { 
     return; 
     } 

     // Remove invalid value 
     this.input 
     .val("") 
     .attr("title", value + " didn't match any item") 
     .tooltip("open"); 
     this.element.val(""); 
     this._delay(function() { 
     this.input.tooltip("close").attr("title", ""); 
     }, 2500); 
     this.input.autocomplete("instance").term = ""; 
    }, 

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

    $("#company_master").combobox(); 
});