Yahoo! Developer Network Home - Help

Site Search (YDN & YUIBlog):

# 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.

View example in new window.

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:

/* custom styles for multiple stacked instances with custom formatting */ #example0 { z-index:9001; } /* z-index needed on top instances for ie & sf absolute inside relative issue */ #example1 { z-index:9000; } /* z-index needed on top instances for ie & sf absolute inside relative issue */ .autocomplete { padding-bottom:2em;width:40%; }/* set width of widget here*/ .autocomplete .yui-ac-highlight .sample-quantity, .autocomplete .yui-ac-highlight .sample-result, .autocomplete .yui-ac-highlight .sample-query { color:#FFF; } .autocomplete .sample-quantity { float:right; } /* push right */ .autocomplete .sample-result { color:#A4A4A4; } .autocomplete .sample-query { color:#000; }

Markup:

<div id="autocomplete_examples"> <p><strong>Note:</strong> 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.</p> <h2>Sample Search (1 sec query delay):</h2> <div id="example0" class="autocomplete"> <input id="ysearchinput0" type="text"> <div id="ysearchcontainer0"></div> </div> <h2>Sample Search (0.2 sec query delay):</h2> <div id="example1" class="autocomplete"> <input id="ysearchinput1" type="text"> <div id="ysearchcontainer1"></div> </div> <h2>Sample Search (0 sec query delay):</h2> <div id="example2" class="autocomplete"> <input id="ysearchinput2" type="text"> <div id="ysearchcontainer2"></div> </div> </div>

JavaScript:

YAHOO.example.ACFlatData = new function(){ // Define a custom formatter function this.fnCustomFormatter = function(oResultItem, sQuery) { var sKey = oResultItem[0]; var nQuantity = oResultItem[1]; var sKeyQuery = sKey.substr(0, sQuery.length); var sKeyRemainder = sKey.substr(sQuery.length); var aMarkup = ["<div class='sample-result'><div class='sample-quantity'>", nQuantity, "</div><span class='sample-query'>", sKeyQuery, "</span>", sKeyRemainder, "</div>"]; return (aMarkup.join("")); }; // Instantiate one XHR DataSource and define schema as an array: // ["Record Delimiter", // "Field Delimiter"] this.oACDS = new YAHOO.widget.DS_XHR("assets/php/ysearch_flat.php", ["\n", "\t"]); this.oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_FLAT; this.oACDS.maxCacheEntries = 60; this.oACDS.queryMatchSubset = true; // Instantiate first AutoComplete var myInput = document.getElementById('ysearchinput0'); var myContainer = document.getElementById('ysearchcontainer0'); this.oAutoComp0 = new YAHOO.widget.AutoComplete(myInput,myContainer,this.oACDS); this.oAutoComp0.delimChar = ";"; this.oAutoComp0.queryDelay = 1; this.oAutoComp0.formatResult = this.fnCustomFormatter; // Instantiate second AutoComplete this.oAutoComp1 = new YAHOO.widget.AutoComplete('ysearchinput1','ysearchcontainer1', this.oACDS); this.oAutoComp1.delimChar = ";"; this.oAutoComp1.formatResult = this.fnCustomFormatter; // Instantiate third AutoComplete this.oAutoComp2 = new YAHOO.widget.AutoComplete('ysearchinput2','ysearchcontainer2', this.oACDS); this.oAutoComp2.queryDelay = 0; this.oAutoComp2.delimChar = ";"; this.oAutoComp2.prehighlightClassName = "yui-ac-prehighlight"; this.oAutoComp2.formatResult = this.fnCustomFormatter; };

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### AutoComplete Control Examples:

### 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