jQuery AutoComplete and Lasso to Autopopulate Multiple Fields and do a Conditional Search

Modified on October 31, 2013.

How to use jQuery Autocomplete and Lasso on multiple fields to find and select from a list of values on a dropdown form field and use that selection to autopopulate other form fields, load record data, and conditionally filter a searchable dropdown list on another form field by using the previously selected value.

Steps

  • After typing the first two letters, see a list of matching cities (with their state and zip code).
  • Once you select a city, the state and zip code fields automatically fill in, and you see a list of organizations in the selected city + state.
  • When you start typing in the organization dropdown field, you see a list of matching organizations in the selected city + state (instead of a list of all matching organizations).

Detailed explanations are in the comments.

You can run the demo.

And download the code.

Watch Using Firebug to Check a jQuery Autocomplete Search to see how I use the Firebug plugin for FireFox to see the jQuery search results in their raw form – the first place to look if there are any problems.