Autocompleting Text Fields - J Query

Problem
There are two HTML input types that allow a user to select one value out of a list of existing values: radio buttons and selects. Radio buttons work well for lists with up to eight items, and selects work well with up to 30 to 150, depending on the type of data.Both fall short when the user can enter a new value as well—in this case they are usually accompanied by an “Other” field. Both become useless when the list is big, maybe 500or 500,000 items.

Solution

The jQuery UI auto complete widget can solve the various situations where a select is n’t enough. In the simplest case, the data to display is available in a JavaScript array:

Here we apply the auto complete plugin to a month input, with the data being a plain JavaScript array.
When the data is n’t already available on the client side, the plugin can get it from aserver-side resource:

The plugin then sends a GET request to that resource, with the user-entered value appended as the q parameter, e.g., addresses.php?q=ma. As a response, the plugin expects a list of new line separated values:
Mainstreet
Mallstreet
Marketstreet

Discussion

The first decision to make when using the plugin is deciding on local or remote data.
With local data, the complete data set is already present in the browser’s memory. It could have been loaded as part of the page or via a separate Ajax request. In any case,it’s loaded just once. This mode is practical when the data is small and static—less than 500 rows of data—and does n’t change while selecting a value. The big advantage of local data is that it’s extremely fast to find matching values.
Remote data is loaded from the server in small chunks (up to 100 rows per chunk makes sense). This works with both small data sets as well as very big data sets (say, more than half a million rows). As the data is loaded from the server, finding matching values is slower when compared to local data. This is mitigated by loading big enough chunks,which can then be filtered down on the client side without additional requests.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics