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:

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

Markup:

1<div id="autocomplete_examples"> 
2    <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> 
3    <h2>Sample Search (1 sec query delay):</h2> 
4    <div id="example0" class="autocomplete"> 
5        <input id="ysearchinput0" type="text"> 
6        <div id="ysearchcontainer0"></div> 
7    </div> 
8    <h2>Sample Search (0.2 sec query delay):</h2> 
9    <div id="example1" class="autocomplete"> 
10        <input id="ysearchinput1" type="text"> 
11        <div id="ysearchcontainer1"></div> 
12    </div> 
13    <h2>Sample Search (0 sec query delay):</h2> 
14    <div id="example2" class="autocomplete"> 
15        <input id="ysearchinput2" type="text"> 
16        <div id="ysearchcontainer2"></div> 
17    </div> 
18</div> 
view plain | print | ?

JavaScript:

1YAHOO.example.ACFlatData = new function(){ 
2    // Define a custom formatter function 
3    this.fnCustomFormatter = function(oResultItem, sQuery) { 
4        var sKey = oResultItem[0]; 
5        var nQuantity = oResultItem[1]; 
6        var sKeyQuery = sKey.substr(0, sQuery.length); 
7        var sKeyRemainder = sKey.substr(sQuery.length); 
8        var aMarkup = ["<div class='sample-result'><div class='sample-quantity'>", 
9            nQuantity, 
10            "</div><span class='sample-query'>", 
11            sKeyQuery, 
12            "</span>", 
13            sKeyRemainder, 
14            "</div>"]; 
15        return (aMarkup.join("")); 
16    }; 
17 
18    // Instantiate one XHR DataSource and define schema as an array: 
19    //     ["Record Delimiter", 
20    //     "Field Delimiter"] 
21    this.oACDS = new YAHOO.widget.DS_XHR("assets/php/ysearch_flat.php", ["\n", "\t"]); 
22    this.oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_FLAT; 
23    this.oACDS.maxCacheEntries = 60; 
24    this.oACDS.queryMatchSubset = true; 
25 
26    // Instantiate first AutoComplete 
27    var myInput = document.getElementById('ysearchinput0'); 
28    var myContainer = document.getElementById('ysearchcontainer0'); 
29    this.oAutoComp0 = new YAHOO.widget.AutoComplete(myInput,myContainer,this.oACDS); 
30    this.oAutoComp0.delimChar = ";"; 
31    this.oAutoComp0.queryDelay = 1; 
32    this.oAutoComp0.formatResult = this.fnCustomFormatter; 
33 
34    // Instantiate second AutoComplete 
35    this.oAutoComp1 = new YAHOO.widget.AutoComplete('ysearchinput1','ysearchcontainer1', this.oACDS); 
36    this.oAutoComp1.delimChar = ";"; 
37    this.oAutoComp1.formatResult = this.fnCustomFormatter; 
38 
39    // Instantiate third AutoComplete 
40    this.oAutoComp2 = new YAHOO.widget.AutoComplete('ysearchinput2','ysearchcontainer2', this.oACDS); 
41    this.oAutoComp2.queryDelay = 0; 
42    this.oAutoComp2.delimChar = ";"; 
43    this.oAutoComp2.prehighlightClassName = "yui-ac-prehighlight"; 
44    this.oAutoComp2.formatResult = this.fnCustomFormatter; 
45}; 
view plain | print | ?

YUI Logger Output:

Logger Console

INFO78ms (+1) 1:52:40 AM:
AutoComplete  instance2 ysearchinput2
AutoComplete initialized
INFO77ms (+0) 1:52:40 AM:
AutoComplete  instance1 ysearchinput1
AutoComplete initialized
INFO77ms (+2) 1:52:40 AM:
AutoComplete  instance0 ysearchinput0
AutoComplete initialized
INFO75ms (+75) 1:52:40 AM:
DataSource  instance0
XHR DataSource initialized
INFO0ms (+0) 1:52:40 AM:
global
Logger initialized

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

Reload with logging
and debugging disabled.

More AutoComplete Control Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

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