如何搜索与自动完成输入一个选择框项目在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/

希望这会有用。