AutoComplete Widget :: Complex Flat-data Implementation

DataSource

This DataSource instance points to a custom PHP script that returns flat demo data of recent search terms and number of results. The schema has been defined to parse tab-delimited data rows that are separated by line breaks. For maximum cache usage, the DataSource has been configured to match query subsets in the cache, and the cache itself has been turned up to 60 entries for fewer round trips to the server.

AutoComplete

Three AutoComplete instances are created that all point the a single DataSource for maximimum cache efficiency. Queries can be delimited using the semi-colon (;) character. For demonstration purposes, each instance decreases the query delay slightly, and each instance presents the return data in the container in a slightly different way.

Sample Code

CSS:

#ysearchmod {position:relative;padding:1em;}

#ysearchautocomplete0, #ysearchautocomplete1, #ysearchautocomplete2 {position:relative;margin-bottom:1.5em;width:40%;}/* set width of widget here*/

#ysearchautocomplete0 {z-index:9001;} /* for IE z-index of absolute divs inside relative divs issue */

#ysearchautocomplete1 {z-index:9000;} /* for IE z-index of absolute divs inside relative divs issue */

#ysearchinput0, #ysearchinput1, #ysearchinput2 {position:absolute;width:100%;height:1.4em;}

#ysearchcontainer0, #ysearchcontainer1, #ysearchcontainer2 {position:absolute;top:1.7em;width:100%;}

#ysearchcontainer0 .yui-ac-content, #ysearchcontainer1 .yui-ac-content, #ysearchcontainer2 .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}

#ysearchcontainer0 .ysearchquery, #ysearchcontainer1 .ysearchquery {position:absolute;right:10px;color:#808080;z-index:10;}

#ysearchcontainer0 .yui-ac-shadow, #ysearchcontainer1 .yui-ac-shadow, #ysearchcontainer2 .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}

#ysearchcontainer0 ul, #ysearchcontainer1 ul, #ysearchcontainer2 ul {padding:5px 0;width:100%;}

#ysearchcontainer0 li, #ysearchcontainer1 li, #ysearchcontainer2 li {padding:0 5px;cursor:default;white-space:nowrap;}

#ysearchcontainer0 li.yui-ac-highlight {background:#ff0;}

#ysearchcontainer1 li.yui-ac-highlight {background:#0ff;}

#ysearchcontainer2 li.yui-ac-highlight {background:#a0a0a0;}

#ysearchcontainer2 li.yui-ac-prehighlight {background:pink;}

Markup:

<h2>Yahoo! Search (1 sec query delay):</h2>

</div>

<h2>Yahoo! Search (0.5 sec query delay):</h2>

</div>

<h2>Yahoo! Search (0 sec query delay):</h2>

</div>

</form>

</div>

JavaScript:

// Instantiate one XHR DataSource and define schema as an array:

//     ["Record Delimiter",

//     "Field Delimiter"]

oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_flat.php", ["\n", "\t"]);

oACDS.responseType = YAHOO.widget.DS_XHR.prototype.TYPE_FLAT;

oACDS.maxCacheEntries = 60;

oACDS.queryMatchSubset = true;

// Instantiate first AutoComplete

var myInput = document.getElementById('ysearchinput0');

var myContainer = document.getElementById('ysearchcontainer0');

oAutoComp0 = new YAHOO.widget.AutoComplete(myInput,myContainer,oACDS);

oAutoComp0.delimChar = ";";

oAutoComp0.queryDelay = 1;

oAutoComp0.formatResult = 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 id='ysearchresult'><div class='ysearchquery'>",

nQuantity,

"</div><span style='font-weight:bold'>",

sKeyQuery,

"</span>",

sKeyRemainder,

"</div>"];

return (aMarkup.join(""));

};

// Instantiate second AutoComplete

oAutoComp1 = new YAHOO.widget.AutoComplete('ysearchinput1','ysearchcontainer1', oACDS);

oAutoComp1.delimChar = ";";

oAutoComp1.formatResult = 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='ysearchresult'><div class='ysearchquery'>",

nQuantity,

"</div><span style='color:red'>",

sKeyQuery,

"</span>",

sKeyRemainder,

"</div>"];

return (aMarkup.join(""));

};

// Instantiate third AutoComplete

oAutoComp2 = new YAHOO.widget.AutoComplete('ysearchinput2','ysearchcontainer2', oACDS);

oAutoComp2.delimChar = ";";

oAutoComp2.queryDelay = 0;

oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";

AutoComplete Widget :: Flat Data Custom Script

DataSource

AutoComplete

Yahoo! Search (1 sec query delay):

Yahoo! Search (0.5 sec query delay):

Yahoo! Search (0 sec query delay):

Sample Code