AutoComplete Widget :: Flat Data Custom Script

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.

Yahoo! Search (1 sec query delay):

Yahoo! Search (0.5 sec query delay):

Yahoo! Search (0 sec query delay):

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:


    <!-- AutoComplete begins -->

    <div id="ysearchmod">

        <form onsubmit="return YAHOO.example.ACFlatData.validateForm();">

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

            <div id="ysearchautocomplete0">

                <input id="ysearchinput0">

                <div id="ysearchcontainer0"></div>

            </div>

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

            <div id="ysearchautocomplete1">

                <input id="ysearchinput1">

                <div id="ysearchcontainer1"></div>

            </div>

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

            <div id="ysearchautocomplete2">

                <input id="ysearchinput2">

                <div id="ysearchcontainer2"></div>

            </div>

        </form>

    </div>

    <!-- AutoComplete ends -->

    

JavaScript:


    // Instantiate one data source 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 auto complete

    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 auto complete

    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 auto complete

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

    oAutoComp2.delimChar = ";";

    oAutoComp2.queryDelay = 0;

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