YUI Library Home

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.

Search our database:

Sample Code

Data:

1... 
2food and drink   1924 
3food basic   1075 
4food carts   1042 
5... 
view plain | print | ?

CSS:

1#myAutoComplete { 
2    width:25em/* set width here or else widget will expand to fit its container */ 
3    padding-bottom:2em
4} 
view plain | print | ?

Markup:

1<div id="myAutoComplete"
2    <input id="myInput" type="text"
3    <div id="myContainer"></div> 
4</div> 
view plain | print | ?

JavaScript:

1YAHOO.example.BasicRemote = function() { 
2    // Use an XHRDataSource 
3    var oDS = new YAHOO.util.XHRDataSource("assets/php/ysearch_flat.php"); 
4    // Set the responseType 
5    oDS.responseType = YAHOO.util.XHRDataSource.TYPE_TEXT; 
6    // Define the schema of the delimited results 
7    oDS.responseSchema = { 
8        recordDelim: "\n"
9        fieldDelim: "\t" 
10    }; 
11    // Enable caching 
12    oDS.maxCacheEntries = 5; 
13 
14    // Instantiate the AutoComplete 
15    var oAC = new YAHOO.widget.AutoComplete("myInput""myContainer", oDS); 
16     
17    return { 
18        oDS: oDS, 
19        oAC: oAC 
20    }; 
21}(); 
view plain | print | ?

Copyright © 2008 Yahoo! Inc. All rights reserved.

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