Example: AutoComplete - Flat-file Data (YUI Library)

This example's XHR DataSource instance points to a custom PHP script that returns flat-file data. The DataSource schema is used to parse the tab- and linebreak-delimited data. For maximum cache performance, the queryMatchSubset property 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 presents the return data in the container using slightly different markup.

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;} /* abs for ie quirks */
            #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:

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.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-file Data

Yahoo! Search (1 sec query delay):

Yahoo! Search (0.5 sec query delay):

Yahoo! Search (0 sec query delay):

Sample Code