CODEWITHSUNDEEP
javascriptjqueryhtml
Jasper
Jasper

Reputation: 8705

JQuery Searchable Dropdown box

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

Upvotes: 8

Views: 76479

Answers (2)

krishwader
krishwader

Reputation: 11381

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/

Upvotes: 3

S. Rasel
S. Rasel

Reputation: 2969

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/

Upvotes: 29

Related Questions