JQuery Searchable Dropdown box
Solution 1
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/
Solution 2
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/
Related videos on Youtube
Jasper
Areas of interest and skill: Java / J2EE / MongoDB / Big Data/ Hadoop / Machine Learning / Cloud / Amazon EC2
Updated on July 23, 2022Comments
-
Jasper over 1 year
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:
$("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...
-
Jasper over 10 yearshungerpain> Apparently this does not have support for keyboard up/down actions to move across the list items. Any idea?
-
WtFudgE over 8 yearsWow chosen is awesome
-
marknt15 over 7 yearsI'm using it but viewing it in mobile is not supported :(
-
LiefLayer about 5 yearsIt works with struts2 without any problem (unlike select2 plugin)