JQuery Searchable Dropdown框

Question

我有一个可搜索的列表,使用JQuery插件创建:http://plugins.jquery.com/searchit/

但是我希望在列表框第一次显示时默认选择一些值.即使我在选项标签中提到了"选择"(前面的罗克福德).这部分不起作用.

请看这里的样本:

http://jsfiddle.net/QuYJD/22/

$("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>

任何的想法？或任何其他解决方案......

Answer 1

您可以检查所选的jQuery 插件.它更加用户友好,并具有不同的UI.

它具有您正在寻找的功能.请转到以下链接了解更多详情

http://harvesthq.github.io/chosen/

Answer 2

一种有点hacky的方式

也许你可以在初始化插件后执行类似的操作：

$(".searchbox").val($("#listBox1 :selected").val())

因为这个插件似乎让你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>

插件变更

我在名为 的插件中添加了另一个选项selected。如果您将其设置为true，则文本框将显示您的选择option。只需添加这个额外选项：

$("select").searchit({
      textFieldClass: 'searchbox',
      selected: true
 });

演示： http: //jsfiddle.net/hungerpain/QuYJD/23/