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", "Addyston", 'closed'], "Adelphi", "Adena", "Adrian", "Akron"]}) // truncated data...
    </script>
  

Ajax Data

QuickSelect input box with data from url formatted as JSON ('zips_starting_with_49.json' in this case).
Data from the first field will dictate the other 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.

Enter a zip beginning with 49___

Witness the glory

          
            <label>Zip</label> <input type="text" id="zip" />
            <label>City</label> <input type="text" id="city" />
            <label>State</label> <input type="text" id="state" />
            
            <script type="text/javascript">
              $(function(){
                $('#zip').quickselect({
                  ajax:'zips_starting_with_49.json', /* call to url with json formatted array of data */
                  match:'substring',
                  autoSelectFirst:false,
                  mustMatch:true,
                  additionalFields:[$('#city'), $('#state')],
                  formatItem:function(data, index, total){return data[0]+", "+data[1]+" "+data[2]}
                });
              });
            </script>
          
        

Select converted into QuickSelect

select/options tags converted to text input coupled with hidden input:
City: Aberdeen Ada Adamsville Addyston Adelphi Adena Adrian Akron Albany Alexandria Alger Alledonia Alliance Alpha Alvada Alvordton Amanda Amelia Amesville Amherst Amlin Amsden Amsterdam Andover Anna Ansonia Antwerp Apple Creek Arcadia Arcanum Archbold Arlington Ashland Ashley Ashtabula Ashville Athens Attica Atwater Augusta Aurora Austinburg Ava Avon
Note that for a converted select group, some option defaults change:
{mustMatch : true, autoSelectFirst : true}
Also, some options are effectively disabled:
ajax, data, additionalFields.

  
    <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>
      $(function(){
        $("#ExampleThree_OptionsData").quickselect();
      });
    </script>