jQuery可搜索下拉框 [英] JQuery Searchable Dropdown box

问题描述

我有一个可搜索的列表，该列表是使用JQuery插件从以下位置创建的: http://plugins.jquery.com/searchit /

I have a searchable list, created using JQuery Plugin from: http://plugins.jquery.com/searchit/

但是我希望在列表框第一次出现时默认选择一些值.即使我已经在选项标签中提到了已选择"(以下示例中的Rockford).这部分不起作用.

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:

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>

有什么主意吗?或任何其他解决方案...

Any idea? Or any other solution...

推荐答案

一种小巧的方式

也许您可以在插入插件后执行以下操作:

A kinda hacky way

Maybe you could do something like this after you init the plugin :

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

因为此插件似乎使您select陷入了困境:

Because this plugin seems to be making you select into this:

<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.只需添加此额外选项:

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 :

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

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

这篇关于jQuery可搜索下拉框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！