jQuery : QuickSelect

Examples

Show 10 closest matches from Local Data

QuickSelect input box with source data defined in javascript Array limited to 10 suggestions:
City:

  
    <input type="text" id="ExampleOne_LocalData" value="" />
    
    <script>
    $('#ExampleOne_LocalData').quickselect({
      maxItemsToShow:10,
      data:["Aberdeen", "Ada", "Adamsville", "Addyston", "Adelphi", "Adena", "Adrian", "Akron"]}) // truncated data...
    </script>
  

Ajax Data

QuickSelect input box with data from url formatted as JSON ('ask.json' in this case).
Data from the first field will dictate the second fields data based upon the json provided.
In an actual implementation, the data returned should correspond to what you've typed
(the request adds a query-string "?q=<what-you-typed>").
In this example, the json data is just a static file.
City:

  
    <input type="text" id="ExampleTwo_AjaxData" value="" style="width: 200px;" />
    <input id='other_thing_field' type='text' name='other_thing' />
    
    <script>
      $('#ExampleTwo_AjaxData').quickselect({
        url:'ask.json',
        match:'substring',
        autoSelectFirst:false,
        mustMatch:true,
        additional_fields:$('#other_thing_field'),
        formatItem:function(data, index, total){return ''+index+'/'+total+'. '+data[0]+" ("+data[1]+")"}
      });
    </script>
  

Select converted into QuickSelect

select/options tags converted to text input coupled with hidden input:
City:
Note that for a converted select group, some option defaults change:
{mustMatch : true, autoSelectFirst : true}
Also, some options are effectively disabled:
url, data, additional_fields.

  
    <select name="ExampleThree_OptionsData" id="ExampleThree_OptionsData">
      <!-- Include an empty option at the top to leave the field blank.
           Field will automatically be prepopulated with whatever option is marked selected, if there is one. -->
      <option value='' ></option>
      <option value='1'>Aberdeen</option>
      <option value='2'>Ada</option>
      <option value='3'>Adamsville</option>
      <option value='4'>Addyston</option>
      <option value='5'>Adelphi</option>
      <!-- Options truncated ... -->
    <select>

    <script>
      $("#ExampleThree_OptionsData").quickselect();
    </script>
  

Plugin Files

  1. jquery.quickselect.js (Unpacked javascript) or
    jquery.quickselect.pack.js (Packed javascript)
  2. jquery.quickselect.css (Supporting CSS)
  3. quicksilver.js (**Optional: Inclusion will enable quicksilver like similarity matching.)

Dependencies

  1. jQuery >= 1.2.6 (Others are Untested)

Options