# 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", "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___

Zip

### Witness the glory

City State

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

## Another converted Select...

select/options tags converted to text input coupled with hidden input:
Agency:

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

- ajax: if you want to load data via ajax, include a url. The query text will be appended as ?q=$value.
- data: include data here if you aren’t using ajax.
- minChars: the minimum number of characters before triggering the drop-down (and ajax, if applicable).
- delay: milliseconds after typing that the results are re-evaluated. Make this longer if your ajax is bogging down.
- matchCase: specify that the drop-down should be case-sensitive.
- match: ‘substring’ for exact match-as-you-type, ‘quicksilver’ for similarity matching. Auto-detects whether quicksilver.js is included and active, and defaults to quicksilver mode if it can.
- matchContains: use with ‘substring’ only, means that what you type can match anywhere in the choice item, not just the beginning.
- mustMatch: if you’re not using any auto-select option, use this if you absolutely need the typed value to end up matching one of the list items in the end. If something is typed but no match is found, the text field and all fields specified in additionalFields instantly get blank values.
- extraParams: extra parameters for the ajax url.
- autoSelectFirst: keep the first item selected as you type, and tab or enter will automatically fill in the rest from the top item.
- selectSingleMatch: use this if NOT using autoSelectFirst, to make the control automatically select the top item when there is only one matched item left.
- maxItemsToShow: only show up to x number of items.
- additionalFields: (a jquery object with one or more elements) more fields to update with the extra data. Not honored when converting a select/option group to a quickselect control. For example, you may want to provide quickselect on a zipcode field, but when selected, update the city and state field automatically with the results.
- autoFill: use this if you want the text input to automatically try to finish what you’re typing as you type, based on the top entry. This only works well if your settings make the top listing exactly match what you’re typing.
- width: set the width of the drop-down list.
- formatItem: assign a function to use for formatting the list items. The function is called with arguments: data, index, total. See example #2.
- inputClass: css class for styling the text input
- loadingClass: an extra css class for styling the text input while loading
- resultsClass: css class for styling the drop-down list
- selectedClass: css class for styling the currently-selected item in the drop-down list