如何搜索與自動完成輸入一個選擇框項目在jQuery UI的

Question

我的例子：https://jsfiddle.net/anhoamth/1/

我有一個有8個或更多尺寸的選擇框。當我開始在選擇框上方的輸入字段中傾斜時，它應該在選擇框中向我顯示自動完成結果。這是可能做到這一點與jQuery UI自動完成？

我的html代碼：

<input type="text" name="selectType" id="selectType"><br><br> 
<select name="type" id="type" size="8" style="width:173px"> 
    <option value="01">Samsung</option> 
    <option value="02">Nokia</option> 
    <option value="03">Apple</option> 
    <option value="04">LG</option> 
    <option value="05">Huawei</option> 
</select><br><br> 
<input type="text" name="showValue"><br><br> 

我的js代碼：

$(document).ready(function(){ 
    $('select[name=type]').on('change', function(){ 
    var getOptionValue = $(this).val(); 
    setValue(getOptionValue); 
    }); 

    function setValue(param) { 
    $('input[name=showValue]').val(param); 
    }; 

    function autocomplete() { 
    $("input[name=showValue]").autocomplete({ 
     // do something ?? 
    }); 
    }; 
}); 

Answer 1

使用這個方便的插件叫做Select2

<select class="phone-select" size="8" style="width:173px"> 
    <option value="01">Samsung</option> 
    <option value="02">Nokia</option> 
    <option value="03">Apple</option> 
    <option value="04">LG</option> 
    <option value="05">Huawei</option> 
</select> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $(".phone-select").select2(); 
    }); 
</script> 

Answer 2

看看這個引導插件：https://silviomoreto.github.io/bootstrap-select/examples/

希望這會有用。