AutoComplete Widget :: Complex Flat-data Implementation : AutoComplete Widget « Ajax Layer « JavaScript DHTML






AutoComplete Widget :: Complex Flat-data Implementation


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AutoComplete Widget :: Complex Flat-data Implementation</title>
<link type="text/css" rel="stylesheet" href="./build/reset/reset.css">
<link type="text/css" rel="stylesheet" href="./build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="./build/logger/assets/logger.css">
<link type="text/css" rel="stylesheet" href="./examples/autocomplete/css/examples.css">
<link type="text/css" rel="stylesheet" href="./docs/assets/dpSyntaxHighlighter.css">

<style type="text/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;}
</style>
</head>

<body>
<div id="hd">
    <h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: Flat Data Custom Script</h1>
</div>

<div id="bd">
    <!-- Logger begins -->
    <div id="logger"></div>
    <!-- Logger ends -->

    <!-- Content begins -->
    <h3>DataSource</h3>
    <p>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.
    </p>

    <h3>AutoComplete</h3>
    <p>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.</p>

    <!-- 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 -->
    
    <!-- Sample code begins -->
    <div id="code">
        <h3>Sample Code</h3>

        <p>CSS:</p>

        <textarea name="code" class="HTML" cols="60" rows="1">
            #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;}
        </textarea>

        <p>Markup:</p>

        <textarea name="code" class="HTML" cols="60" rows="1">
            <!-- 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 -->
        </textarea>

        <p>JavaScript:</p>

        <textarea name="code" class="JScript" cols="60" rows="1">
            // Instantiate one XHR DataSource and define schema as an array:
            //     ["Record Delimiter",
            //     "Field Delimiter"]
            oACDS = new YAHOO.widget.DS_XHR("./examples/autocomplete/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";
        </textarea>
    </div>
    <!-- Code sample ends -->
</div>
<!-- Content ends -->

<!-- Libary begins -->
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/event/event-debug.js"></script>
<script type="text/javascript" src="./build/connection/connection.js"></script>
<script type="text/javascript" src="./build/animation/animation.js"></script>
<script type="text/javascript" src="./build/autocomplete/autocomplete-debug.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<!-- Library ends -->

<script type="text/javascript">
YAHOO.example.ACFlatData = function(){
    var mylogger;
    var oACDS;
    var oAutoComp0,oAutoComp1,oAutoComp2;

    return {
        init: function() {
            //Logger
            mylogger = new YAHOO.widget.LogReader("logger");

            // Instantiate one XHR DataSource and define schema as an array:
            //     ["Record Delimiter",
            //     "Field Delimiter"]
            oACDS = new YAHOO.widget.DS_XHR("./examples/autocomplete/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";
        },
            
        validateForm: function() {
            // Validate form inputs here
            return false;
        }
    };
}();

YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACFlatData.init);
</script>

<script type="text/javascript" src="./docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>

</body>
</html>

           
       








yui.zip( 3,714 k)

Related examples in the same category

1.Autocompleter functional tes
2.Autocompleter functional test 2
3.Auto complete textbox
4.AutoComplete Widget :: Customizable Example
5.AutoComplete Widget :: Customized XML Implementation
6.AutoComplete Widget :: JS Array Example
7.AutoComplete Widget :: JS Function Example
8.AutoComplete Widget :: Basic JSON Implementation
9.AutoComplete Widget :: Basic XML Implementation
10.Ajax 4 Suggest