如何搜索与自动完成输入一个选择框项目在jQuery UI的

问题描述：

我的例子：https://jsfiddle.net/anhoamth/1/如何搜索与自动完成输入一个选择框项目在jQuery UI的

我有一个有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 ?? 
    }); 
    }; 
});

因此..根据您的示例，期望的结果是每当您开始在输入中输入组合框之后的输入？如果我输入n，然后选择诺基亚？那么我按退格键然后呢？那么如果n有多个匹配呢？ – Ursache

当我按下退格键时，它应该显示选项的整个列表。如果n的结果多于它应该显示多个匹配。 –

答

使用这个方便的插件叫做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>

我需要大小最小8 –

@GregOstry只需将size属性添加到select元素 –

select中的attr大小不起作用https://jsfiddle.net/yk5kjrL5/ –

答

看看这个引导插件：https://silviomoreto.github.io/bootstrap-select/examples/

希望这会有用。

如何搜索与自动完成输入一个选择框项目在jQuery UI的

相关推荐