Question

I need to have a user select their address in our address database (I’m in a local government agency) mostly so I can get their property pin #. In the past, we have prompted for addresses by first selecting street, then direction, then house number. This works but as always, I am looking for a better way. I found this cool jQuery plugin called Chosen that allows a person to start typing and it’ll automagically search and find something in the list. I am thinking this would be a great way for someone to search for their address but as you can imagine, this list is quite large and is only getting bigger. I don’t really want to send the entire list across the internet for one address.

I am thinking I need to have a web service return data like Google instant search does. After about 3 characters, I provides them with a list. Is there any jQuery (or other type) controls that can poll a web service as you type?

Answer 1

Try the jQueryUI autocomplete widget. Sounds like it’s just what you need.

Here’s the description from the site:

Autocomplete, when added to an input field, enables users to quickly
find and select from a pre-populated list of values as they type,
leveraging searching and filtering.

By giving an Autocomplete field focus or entering something into it,
the plugin starts searching for entries that match and displays a list
of values to choose from. By entering more characters, the user can
filter down the list to better matches.

This can be used to enter previous selected values, for example you
could use Autocomplete for entering tags, to complete an address, you
could enter a city name and get the zip code, or maybe enter email
addresses from an address book.

You can pull data in from a local and/or a remote source: Local is
good for small data sets (like an address book with 50 entries),
remote is necessary for big data sets, like a database with hundreds
or millions of entries to select from.

Autocomplete can be customized to work with various data sources, by
just specifying the source option. A data source can be:

• an Array with local data
• a String, specifying a URL
• a Callback

Expected data format

The data from local data, a url or a callback can come in two
variants:

• An Array of Strings: [ “Choice1”, “Choice2” ]
• An Array of Objects with label and value properties: [ { label: “Choice1”, value: “value1” }, … ]

The label property is displayed in the suggestion menu. The value will
be inserted into the input element after the user selected something
from the menu. If just one property is specified, it will be used for
both, eg. if you provide only value-properties, the value will also be
used as the label.

When a String is used, the Autocomplete plugin expects that string to
point to a URL resource that will return JSON data. It can be on the
same host or on a different one (must provide JSONP). The Autocomplete
plugin does not filter the results, instead the request parameter
“term” gets added to the URL, which the server-side script should use
for filtering the results. The data itself can be in the same format
as the local data described above.

The third variation, the callback, provides the most flexibility, and
can be used to connect any data source to Autocomplete. The callback
gets two arguments:

• A request object, with a single property called “term”, which refers to the value currently in the text input. For example, when the
  user entered “new yo” in a city field, the Autocomplete term will
  equal “new yo”.
• A response callback, which expects a single argument to contain the data to suggest to the user. This data should be filtered based on the
  provided term, and can be in any of the formats described above for
  simple local data (String-Array or Object-Array with label/value/both
  properties). It’s important when providing a custom source callback to
  handle errors during the request. You must always call the response
  callback even if you encounter an error. This ensures that the widget
  always has the correct state.

The label is always treated as text, if you want the label to be
treated as html you can use Scott González’ html extension. The demos
all focus on different variations of the source-option – look for the
one that matches your use case, and take a look at the code.