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.
Data:
1 | ... |
2 | food and drink 1924 |
3 | food basic 1075 |
4 | food 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:
1 | YAHOO.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 | ? |
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
Note: Logging and debugging is currently turned off for this example.
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings