JQuery 可搜索下拉框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17900527/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Searchable Dropdown box
提问by Jasper
I have a searchable list, created using JQuery Plugin from: http://plugins.jquery.com/searchit/
我有一个使用 JQuery 插件创建的可搜索列表：http: //plugins.jquery.com/searchit/
But i want some value to be selected by default when the list box shows up first time. Even though i have 'selected' mentioned in the option tag (Rockford in ex below). This part is not working.
但是我希望在列表框第一次出现时默认选择一些值。即使我在选项标签中提到了“选择”（下面是罗克福德）。这部分不起作用。
Pls see here sample here:
请在此处查看示例：
$("select").searchit( { textFieldClass: 'searchbox' } );
Type the search text:
<br/>
<select id="listBox1">
<option>Robinhood</option>
<option selected >Rockford</option>
<option>Rome</option>
<option>Ronda</option>
<option>Rondon</option>
<option>Rondonopolis</option>
<option>Rongelap</option>
</select>
Any idea? Or any other solution...
任何的想法？或任何其他解决方案...
采纳答案by krishgopinath
A kinda hacky way
一种有点hacky的方式
Maybe you could do something like this after you init the plugin :
也许你可以在初始化插件后做这样的事情：
$(".searchbox").val($("#listBox1 :selected").val())
Because this plugin seems to be making you selectinto this:
因为这个插件似乎让你select变成了这个：
<input type="textbox" id="__searchit2" class="searchbox">
<div id="__searchitWrapper2" style="display: none; vertical-align: top; overflow: hidden; border: 1px solid rgb(128, 128, 128); position: absolute;">
<select id="listBox2" style="padding: 5px; margin: -5px -20px -5px -5px;">
<option>Robinhood</option>
<option>Rockford</option>
<option selected="">Rome</option>
<option>Ronda</option>
<option>Rondon</option>
<option>Rondonopolis</option>
<option>Rongelap</option>
</select>
</div>
Plugin change
插件改动
I added another option to the plugin called selected. If you set it to true, then the text box will show your selected option. Just add this extra option :
我为插件添加了另一个选项，名为selected. 如果您将其设置为true，则文本框将显示您选择的option. 只需添加此额外选项：
$("select").searchit({
textFieldClass: 'searchbox',
selected: true
});
回答by S. Rasel
You can check the chosen pluginfor jQuery. Its more user friendly and has vary nice UI.
您可以检查所选的 jQuery插件。它更加用户友好，并具有各种漂亮的用户界面。
It has the feature which you are looking for. Please go to the following link for more details
它具有您正在寻找的功能。请前往以下链接了解更多详情
