JQuery Searchable Dropdown box

66,471

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/

Share:
66,471

Related videos on Youtube

Jasper
Author by

Jasper

Areas of interest and skill: Java / J2EE / MongoDB / Big Data/ Hadoop / Machine Learning / Cloud / Amazon EC2

Updated on July 23, 2022

Comments

  • Jasper
    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:

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

  • Jasper
    Jasper over 10 years
    hungerpain> Apparently this does not have support for keyboard up/down actions to move across the list items. Any idea?
  • WtFudgE
    WtFudgE over 8 years
    Wow chosen is awesome
  • marknt15
    marknt15 over 7 years
    I'm using it but viewing it in mobile is not supported :(
  • LiefLayer
    LiefLayer about 5 years
    It works with struts2 without any problem (unlike select2 plugin)

Related