AutoComplete Widget : AutoComplete Widget : Ajax Layer JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » Ajax Layer » AutoComplete Widget »

 

AutoComplete Widget




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AutoComplete Widget :: JS Array Example</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">
    #statesmod {position:relative;}
    #statesautocomplete, #statesautocomplete2 {position:relative;width:15em;margin-bottom:1em;}/* set width of widget here*/
    #statesautocomplete {z-index:9000/* for IE z-index of absolute divs inside relative divs issue */
    #statesinput, #statesinput2 {width:100%;height:1.4em;z-index:0;}
    #statescontainer, #statescontainer2 {position:absolute;top:1.7em;width:100%}
    #statescontainer .yui-ac-content, #statescontainer2 .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
    #statescontainer .yui-ac-shadow, #statescontainer2 .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
    #statescontainer ul, #statescontainer2 ul {padding:5px 0;width:100%;}
    #statescontainer li, #statescontainer2 li {padding:0 5px;cursor:default;white-space:nowrap;}
    #statescontainer li.yui-ac-highlight, #statescontainer2 li.yui-ac-highlight {background:#ff0;}
    #statescontainer li.yui-ac-prehighlight,#statescontainer2 li.yui-ac-prehighlight {background:#FFFFCC;}
</style>
</head>

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

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

    <!-- AutoComplete begins -->
    <div id="statesmod">
        <form onsubmit="return YAHOO.example.ACJSArray.validateForm();">
            <h3>Find a state:</h3>
            <div id="statesautocomplete">
                <input id="statesinput">
                <div id="statescontainer"></div>
            </div>
            <h3>Find an area code</h3>
            <div id="statesautocomplete2">
                <input id="statesinput2">
                <div id="statescontainer2"></div>
            </div>
        </form>
    </div>
    <!-- AutoComplete ends -->

    <!-- Content begins -->
    <h3>DataSource</h3>
    <p>Two DataSource instances point to in-memory JavaScript arrays. The first
    array holds the 50 US states. The second array itself holds arrays of US
    area codes and their corresponding states.</p>

    <h3>AutoComplete</h3>
    <p>Since the two DataSources for this example are already loaded into memory
    via JavaScript arrays, queries should be very fast to return data. Therefore,
    both AutoComplete instances are configured to have a query delay of zero
    seconds.</p.

    <p>A few configurations have also been made to aid the usability of the
    widgets. The autoHighlight and typeAhead features can help reduce the number
    of user actions it takes to submit a valid selection. The
    prehighlightClassName feature provides an supplemental visual feedback for mouse
    events.</p>

    <p>Additionally, the second AutoComplete instance also has been enhanced to
    display two data fields in the container: the area code and the area code's
    state. The forceSelection feature has been enabled to prevent the user from
    typing in a free-form selection.</p>

    <!-- Sample code begins -->
    <div id="code">
    <h3>Sample Code</h3>

        <p>CSS:</p>
        
        <textarea name="code" class="HTML" cols="60" rows="1">
            #statesmod {position:relative;}
            #statesautocomplete, #statesautocomplete2 {position:relative;width:15em;margin-bottom:1em;}/* set width of widget here*/
            #statesautocomplete {z-index:9000/* for IE z-index of absolute divs inside relative divs issue */
            #statesinput, #statesinput2 {width:100%;height:1.4em;z-index:0;}
            #statescontainer, #statescontainer2 {position:absolute;top:1.7em;width:100%}
            #statescontainer .yui-ac-content, #statescontainer2 .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
            #statescontainer .yui-ac-shadow, #statescontainer2 .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
            #statescontainer ul, #statescontainer2 ul {padding:5px 0;width:100%;}
            #statescontainer li, #statescontainer2 li {padding:0 5px;cursor:default;white-space:nowrap;}
            #statescontainer li.yui-ac-highlight, #statescontainer2 li.yui-ac-highlight {background:#ff0;}
            #statescontainer li.yui-ac-prehighlight,#statescontainer2 li.yui-ac-prehighlight {background:#FFFFCC;}
        </textarea>

        <p>Markup:</p>
        
        <textarea name="code" class="HTML" cols="60" rows="1">
            <!-- AutoComplete begins -->
            <div id="statesmod">
                <form onsubmit="return YAHOO.example.ACJSArray.validateForm();">
                    <h3>Find a state:</h3>
                    <div id="statesautocomplete">
                        <input id="statesinput">
                        <div id="statescontainer"></div>
                    </div>
                    <h3>Find an area code</h3>
                    <div id="statesautocomplete2">
                        <input id="statesinput2">
                        <div id="statescontainer2"></div>
                    </div>
                </form>
            </div>
            <!-- AutoComplete ends -->
        </textarea>

        <p>JavaScript:</p>
        
        <textarea name="code" class="JScript" cols="60" rows="1">
            var statesArray = [
                "Alabama",
                "Alaska",
                "Arizona",
                "Arkansas",
                "California",
                "Colorado",
                "Connecticut",
                "Delaware",
                "Florida" // Entire array not shown
            ];

            var areacodesArray = [
                ["201""New Jersey"],
                ["202""Washington, DC"],
                ["203""Connecticut"],
                ["204""Manitoba, Canada"],
                ["205""Alabama"],
                ["206""Washington"],
                ["207""Maine"// Entire array not shown
            ];

            // Instantiate first JS Array DataSource
            oACDS = new YAHOO.widget.DS_JSArray(statesArray);

            // Instantiate first AutoComplete
            oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);
            oAutoComp.queryDelay = 0;
            oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
            oAutoComp.typeAhead = true;
            oAutoComp.useShadow = true;

            // Instantiate second JS Array DataSource
            oACDS2 = new YAHOO.widget.DS_JSArray(areacodesArray);

            // Instantiate second AutoComplete
            oAutoComp2 = new YAHOO.widget.AutoComplete('statesinput2','statescontainer2', oACDS2);
            oAutoComp2.queryDelay = 0;
            oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
            oAutoComp2.typeAhead = true;
            oAutoComp2.useShadow = true;
            oAutoComp2.forceSelection = true;
            oAutoComp2.formatResult = function(oResultItem, sQuery) {
                var sMarkup = oResultItem[0" (" + oResultItem[1")";
                return (sMarkup);
            };
        </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/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 -->

<!-- In-memory JS array begins-->
<script type="text/javascript">
var statesArray = [
    "Alabama",
    "Alaska",
    "Arizona",
    "Arkansas",
    "California",
    "Colorado",
    "Connecticut",
    "Delaware",
    "Florida",
    "Georgia",
    "Hawaii",
    "Idaho",
    "Illinois",
    "Indiana",
    "Iowa",
    "Kansas",
    "Kentucky",
    "Louisiana",
    "Maine",
    "Maryland",
    "Massachusetts",
    "Michigan",
    "Minnesota",
    "Mississippi",
    "Missouri",
    "Montana",
    "Nebraska",
    "Nevada",
    "New Hampshire",
    "New Jersey",
    "New Mexico",
    "New York",
    "North Dakota",
    "North Carolina",
    "Ohio",
    "Oklahoma",
    "Oregon",
    "Pennsylvania",
    "Rhode Island",
    "South Carolina",
    "South Dakota",
    "Tennessee",
    "Texas",
    "Utah",
    "Vermont",
    "Virginia",
    "Washington",
    "West Virginia",
    "Wisconsin",
    "Wyoming"
];
var areacodesArray = [
    ["201""New Jersey"],
    ["202""Washington, DC"],
    ["203""Connecticut"],
    ["204""Manitoba, Canada"],
    ["205""Alabama"],
    ["206""Washington"],
    ["207""Maine"],

    ["208""Idaho"],
    ["209""California"],
    ["210""Texas"],
    ["212""New York"],
    ["213""California"],
    ["214""Texas"],

    ["215""Pennsylvania"],
    ["216""Ohio"],
    ["217""Illinois"],
    ["218""Minnesota"],
    ["219""Indiana"],
    ["224""Illinois"],

    ["225""Louisiana"],
    ["227""Maryland"],
    ["228""Mississippi"],
    ["229""Georgia"],
    ["231""Michigan"],
    ["234""Ohio"],

    ["239""Florida"],
    ["240""Maryland"],
    ["242""Bahamas"],
    ["246""Barbados"],
    ["248""Michigan"],
    ["250""British Columbia"],

    ["251""Alabama"],
    ["252""North Carolina"],
    ["253""Washington"],
    ["254""Texas"],
    ["256""Alabama"],
    ["260""Indiana"],

    ["262""Wisconsin"],
    ["264""Anguilla"],
    ["267""Pennsylvania"],
    ["268""Antigua and Barbuda"],
    ["269""Michigan"],
    ["270""Kentucky"],

    ["276""Virginia"],
    ["281""Texas"],
    ["283""Ohio"],
    ["284""British Virgin Islands"],
    ["289""Ontario"],
    ["301""Maryland"],

    ["302""Delaware"],
    ["303""Colorado"],
    ["304""West Virginia"],
    ["305""Florida"],
    ["306""Saskatchewan, Canada"],
    ["307""Wyoming"],

    ["308""Nebraska"],
    ["309""Illinois"],
    ["310""California"],
    ["312""Illinois"],
    ["313""Michigan"],
    ["314""Missouri"],

    ["315""New York"],
    ["316""Kansas"],
    ["317""Indiana"],
    ["318""Louisiana"],
    ["319""Iowa"],
    ["320""Minnesota"],

    ["321""Florida"],
    ["323""California"],
    ["330""Ohio"],
    ["331""Illinois"],
    ["334""Alabama"],
    ["336""North Carolina"],

    ["337""Louisiana"],
    ["339""Massachusetts"],
    ["340""US Virgin Islands"],
    ["345""Cayman Islands"],
    ["347""New York"],
    ["351""Massachusetts"],

    ["352""Florida"],
    ["360""Washington"],
    ["361""Texas"],
    ["386""Florida"],
    ["401""Rhode Island"],
    ["402""Nebraska"],

    ["403""Alberta, Canada"],
    ["404""Georgia"],
    ["405""Oklahoma"],
    ["406""Montana"],
    ["407""Florida"],
    ["408""California"],

    ["409""Texas"],
    ["410""Maryland"],
    ["412""Pennsylvania"],
    ["413""Massachusetts"],
    ["414""Wisconsin"],
    ["415""California"],

    ["416""Ontario, Canada"],
    ["417""Missouri"],
    ["418""Quebec, Canada"],
    ["419""Ohio"],
    ["423""Tennessee"],
    ["424""California"],

    ["425""Washington"],
    ["434""Virginia"],
    ["435""Utah"],
    ["440""Ohio"],
    ["441""Bermuda"],
    ["443""Maryland"],

    ["445""Pennsylvania"],
    ["450""Quebec, Canada"],
    ["464""Illinois"],
    ["469""Texas"],
    ["470""Georgia"],
    ["473""Grenada"],

    ["475""Connecticut"],
    ["478""Georgia"],
    ["479""Arkansas"],
    ["480""Arizona"],
    ["484""Pennsylvania"],
    ["501""Arkansas"],

    ["502""Kentucky"],
    ["503""Oregon"],
    ["504""Louisiana"],
    ["505""New Mexico"],
    ["506""New Brunswick, Canada"],
    ["507""Minnesota"],

    ["508""Massachusetts"],
    ["509""Washington"],
    ["510""California"],
    ["512""Texas"],
    ["513""Ohio"],
    ["514""Quebec, Canada"],

    ["515""Iowa"],
    ["516""New York"],
    ["517""Michigan"],
    ["518""New York"],
    ["519""Ontario, Canada"],
    ["520""Arizona"],

    ["530""California"],
    ["540""Virginia"],
    ["541""Oregon"],
    ["551""New Jersey"],
    ["557""Missouri"],
    ["559""California"],

    ["561""Florida"],
    ["562""California"],
    ["563""Iowa"],
    ["564""Washington"],
    ["567""Ohio"],
    ["570""Pennsylvania"],

    ["571""Virginia"],
    ["573""Missouri"],
    ["574""Indiana"],
    ["580""Oklahoma"],
    ["585""New York"],
    ["586""Michigan"],

    ["601""Mississippi"],
    ["602""Arizona"],
    ["603""New Hampshire"],
    ["604""British Columbia, Canada"],
    ["605""South Dakota"],
    ["606""Kentucky"],

    ["607""New York"],
    ["608""Wisconsin"],
    ["609""New Jersey"],
    ["610""Pennsylvania"],
    ["612""Minnesota"],
    ["613""Ontario, Canada"],

    ["614""Ohio"],
    ["615""Tennessee"],
    ["616""Michigan"],
    ["617""Massachusetts"],
    ["618""Illinois"],
    ["619""California"],

    ["620""Kansas"],
    ["623""Arizona"],
    ["626""California"],
    ["630""Illinois"],
    ["631""New York"],
    ["636""Missouri"],

    ["641""Iowa"],
    ["646""New York"],
    ["647""Ontario, Canada"],
    ["649""Turks and Caicos Islands"],
    ["650""California"],
    ["651""Minnesota"],

    ["660""Missouri"],
    ["661""California"],
    ["662""Mississippi"],
    ["664""Montserrat"],
    ["667""Maryland"],
    ["670""CNMI"],

    ["671""Guam"],
    ["678""Georgia"],
    ["682""Texas"],
    ["701""North Dakota"],
    ["702""Nevada"],
    ["703""Virginia"],

    ["704""North Carolina"],
    ["705""Ontario, Canada"],
    ["706""Georgia"],
    ["707""California"],
    ["708""Illinois"],
    ["709""Newfoundland, Canada"],

    ["712""Iowa"],
    ["713""Texas"],
    ["714""California"],
    ["715""Wisconsin"],
    ["716""New York"],
    ["717""Pennsylvania"],

    ["718""New York"],
    ["719""Colorado"],
    ["720""Colorado"],
    ["724""Pennsylvania"],
    ["727""Florida"],
    ["731""Tennessee"],

    ["732""New Jersey"],
    ["734""Michigan"],
    ["737""Texas"],
    ["740""Ohio"],
    ["754""Florida"],
    ["757""Viriginia"],

    ["758""St. Lucia"],
    ["760""California"],
    ["763""Minnesota"],
    ["765""Indiana"],
    ["767""Dominica"],
    ["770""Georgia"],

    ["772""Florida"],
    ["773""Illinois"],
    ["774""Massachusetts"],
    ["775""Nevada"],
    ["778""British Columbia, Canada"],
    ["780""Alberta, Canada"],

    ["781""Massachusetts"],
    ["784""St. Vincent &amp; Gren."],
    ["785""Kansas"],
    ["786""Florida"],
    ["787""Puerto Rico"],

    ["801""Utah"],
    ["802""Vermont"],
    ["803""South Carolina"],
    ["804""Virginia"],
    ["805""California"],
    ["806""Texas"],

    ["807""Ontario, Canada"],
    ["808""Hawaii"],
    ["809""Dominican Republic"],
    ["810""Michigan"],
    ["812""Indiana"],
    ["813""Florida"],

    ["814""Pennsylvania"],
    ["815""Illinois"],
    ["816""Missouri"],
    ["817""Texas"],
    ["818""California"],
    ["819""Quebec, Canada"],

    ["828""North Carolina"],
    ["830""Texas"],
    ["831""California"],
    ["832""Texas"],
    ["835""Pennsylvania"],
    ["843""South Carolina"],

    ["845""New York"],
    ["847""Illinois"],
    ["848""New Jersey"],
    ["850""Florida"],
    ["856""New Jersey"],
    ["857""Massachusetts"],

    ["858""California"],
    ["859""Kentucky"],
    ["860""Connecticut"],
    ["862""New Jersey"],
    ["863""Florida"],
    ["864""South Carolina"],

    ["865""Tennessee"],
    ["867""Yukon, NW Territories, Canada"],
    ["868""Trinidad and Tobago"],
    ["869""St. Kitts &amp; Nevis"],
    ["870""Arkansas"],

    ["872""Illinois"],
    ["876""Jamaica"],
    ["878""Pennsylvania"],
    ["901""Tennessee"],
    ["902""Nova Scotia, Canada"],
    ["903""Texas"],

    ["904""Florida"],
    ["905""Ontario, Canada"],
    ["906""Michigan"],
    ["907""Alaska"],
    ["908""New Jersey"],
    ["909""California"],

    ["910""North Carolina"],
    ["912""Georgia"],
    ["913""Kansas"],
    ["914""New York"],
    ["915""Texas"],
    ["916""California"],

    ["917""New York"],
    ["918""Oklahoma"],
    ["919""North Carolina"],
    ["920""Wisconsin"],
    ["925""California"],
    ["928""Arizona"],

    ["931""Tennessee"],
    ["936""Texas"],
    ["937""Ohio"],
    ["939""Puerto Rico"],
    ["940""Texas"],
    ["941""Florida"],

    ["947""Michigan"],
    ["949""California"],
    ["952""Minnesota"],
    ["954""Florida"],
    ["956""Texas"],
    ["959""Connecticut"],

    ["970""Colorado"],
    ["971""Oregon"],
    ["972""Texas"],
    ["973""New Jersey"],
    ["975""Missouri"],
    ["978""Massachusetts"],

    ["979""Texas"],
    ["980""North Carolina"],
    ["984""North Carolina"],
    ["985""Louisiana"],
    ["989""Michigan"]
];
</script>
<!-- In-memory JS array ends-->


<script type="text/javascript">
YAHOO.example.ACJSArray = function() {
    var mylogger;
    var oACDS,oACDS2;
    var oAutoComp,oAutoComp2;
    return {
        init: function() {
            //Logger
            mylogger = new YAHOO.widget.LogReader("logger");

            // Instantiate first JS Array DataSource
            oACDS = new YAHOO.widget.DS_JSArray(statesArray);

            // Instantiate first AutoComplete
            oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);
            oAutoComp.queryDelay = 0;
            oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
            oAutoComp.typeAhead = true;
            oAutoComp.useShadow = true;
            
            // Instantiate second JS Array DataSource
            oACDS2 = new YAHOO.widget.DS_JSArray(areacodesArray);

            // Instantiate second AutoComplete
            oAutoComp2 = new YAHOO.widget.AutoComplete('statesinput2','statescontainer2', oACDS2);
            oAutoComp2.queryDelay = 0;
            oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
            oAutoComp2.typeAhead = true;
            oAutoComp2.useShadow = true;
            oAutoComp2.forceSelection = true;
            oAutoComp2.formatResult = function(oResultItem, sQuery) {
                var sMarkup = oResultItem[0" (" + oResultItem[1")";
                return (sMarkup);
            };
        },

        validateForm: function() {
            // Validate form inputs here
            return false;
        }
    };
}();

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

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

</body>
</html>

           
       

Download : Download nav_yui.zip nav_yui.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo Ajax Layer
» AutoComplete Widget