YUI Library Examples: AutoComplete Control: Use AutoComplete to access flat-file data from a web service

AutoComplete Control: Use AutoComplete to access flat-file data from a web service

This example's XHR DataSource instance points to a custom PHP script that returns data from tab-delimited text file. For maximum cache performance, the DataSource property queryMatchSubset has been enabled, and the cache itself has been turned up to 60 entries for fewer round trips to the server.

On this page there are three separate AutoComplete instances that all point to a single DataSource, which further maximizes cache efficiency. Queries can be delimited using the semi-colon (;) character. For demonstration purposes, each instance decreases the query delay slightly, and each instance formats the return data in the container with slightly different markup.

Note: The flat-file database accessed here has a limited number of terms; for best results, type one-letter at at time and let the AutoComplete instance return — if you type a full, highly-specifc phrase (such as your name) you'll probably get no results from the small dataset.

Sample Search (1 sec query delay):

Sample Search (0.2 sec query delay):

Sample Search (0 sec query delay):

Sample Code

CSS:

Markup:

JavaScript:

Copyright © 2007 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings