JQuery Searchable Dropdown box

Question

I have a searchable list, created using JQuery Plugin from: 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:

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...

Answer 1

You can check the chosen plugin for jQuery. Its more user friendly and has vary nice UI.

It has the feature which you are looking for. Please go to the following link for more details

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

Answer 2

A kinda hacky way

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 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>

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
 });

Demo : http://jsfiddle.net/hungerpain/QuYJD/23/