YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: AutoComplete Control: Basic Remote Data

# AutoComplete Control: Basic Remote Data

This AutoComplete implementation points to an online script that serves a data as delimited plain text. Enabling caching on the DataSource can reduce trips to the server and speed performance for repeated queries.

View example in new window.

### Search our database:

## Sample Code

Data:

... food and drink 1924 food basic 1075 food carts 1042 ...

CSS:

#myAutoComplete { width:25em; /* set width here or else widget will expand to fit its container */ padding-bottom:2em; }

Markup:

<div id="myAutoComplete"> <input id="myInput" type="text"> <div id="myContainer"></div> </div>

JavaScript:

YAHOO.example.BasicRemote = function() { // Use an XHRDataSource var oDS = new YAHOO.util.XHRDataSource("assets/php/ysearch_flat.php"); // Set the responseType oDS.responseType = YAHOO.util.XHRDataSource.TYPE_TEXT; // Define the schema of the delimited results oDS.responseSchema = { recordDelim: "\n", fieldDelim: "\t" }; // Enable caching oDS.maxCacheEntries = 5; // Instantiate the AutoComplete var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS); return { oDS: oDS, oAC: oAC }; }();

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### AutoComplete Control Examples:

- Basic Local Data
- Basic Remote Data
- Customizing Remote Requests
- Custom Formatting, with a Proxyless Remote DataSource
- Searching Field A, Submitting Field B with itemSelectEvent
- Combo Box
- Tagging Example with alwaysShowContainer
- Custom Function to Search Different Fields at Runtime
- Centering AutoComplete On a Page
- Subset Matching
- Find Photos on Flickr
- Configurations Dashboard
- Skinning Model
- Flickr Image Search (included with examples for Rich Text Editor)
- Logger Integration with YUI Components (included with examples for Logger Control)
- Datatable with Autocomplete (included with examples for DataTable Control)
- Complex Application (included with examples for Layout Manager)

### More AutoComplete Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

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