AutoComplete Widget :: Customizable Example : AutoComplete Widget « Ajax Layer « JavaScript DHTML






AutoComplete Widget :: Customizable Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AutoComplete Widget :: Customizable 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">

<style type="text/css">
    #custommod {position:relative;padding:1em;}
    #customautocomplete {position:relative;margin:1em;width:40%;}/* set width of widget here*/
    #custominput {position:absolute;width:100%;height:1.4em;}
    #customcontainer {position:absolute;top:1.7em;width:100%;}
    #customcontainer .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
    #customcontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
    #customcontainer ul {padding:5px 0;width:100%;}
    #customcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
    #customcontainer li.yui-ac-highlight {background:#ff0;}
    #customcontainer 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>
     :: Customizable Example</h1>
</div>

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

    <!-- Code generator begins
    <div id="coder">
        <h3>Sample code</h3>
        <textarea id="output"></textarea>
    </div>
     Code generator ends -->

    <!-- Content begins -->
    <p>When this page loads, a DataSource instance is created that points to the
    same DataSource as the <a href="./ysearch_flat.html">Query a custom PHP
    script for flat data</a> example. However, by changing the values below, you
    can customize the AutoComplete implementation to your own configurations.
    </p>

    <!-- AutoComplete begins -->
    <div id="custommod">
        <form onsubmit="return YAHOO.example.ACCustomizable.validateForm();">
            <h2>Customize your own AutoComplete widget:</h2>
            <div id="customautocomplete">
                <input id="custominput">
                <div id="customcontainer"></div>
            </div>
        </form>
    </div>
    <!-- AutoComplete ends -->

    <!-- Panel begins -->
    <form id="panel">
    
        <!-- The following is in a select to demonstrate the useIFrame feature -->
        <select><option>Customize configurations for AutoComplete</option></select>

        <div>
            <input id="animhoriz" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleAnimHoriz(this);">
            <label for="animhoriz">Animate Horizontally</label>
        </div>
        <div>
            <input id="animvert" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleAnimVert(this);" checked>
            <label for="animvert">Animate Vertically</label>
        </div>
        <div>
            <label for="animspeed">Animation Speed: </label>
            <input id="animspeed" type="text" size="2" value="0.3">
            <input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateAnimSpeed();">
        </div>
        <div>
            <input id="useshadow" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleShadow(this);">
            <label for="useshadow">Use Shadow</label>
        </div>
        <div>
            <input id="useiframe" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleIFrame(this);">
            <label for="useiframe">Use IFrame</label>
        </div>
        <div>
            <input id="typeahead" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleTypeAhead(this);">
            <label for="typeahead">Type Ahead</label>
        </div>
        <div>
            <input id="forceselection" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleForceSelection(this);">
            <label for="forceselection">Force a Selection</label>
        </div>
        <div>
            <label for="maxresults">Maximum Results: </label>
            <input id="maxresults" type="text" size="2" value="10">
            <input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateMaxResults();">
        </div>
        <div>
            <label for="minquerylength">Minimum Query Length: </label>
            <input id="minquerylength" type="text" size="2" value="1">
            <input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateMinQueryLength();"
        </div>
        <div>
            <label for="querydelay">Query Delay: </label>
            <input id="querydelay" type="text" size="2" value="0.5">
            <input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateQueryDelay();">
        </div>
        <div>
            <label for="delimchar">Array of Delimiter Character(s)</label><br>
            <input id="delimchar" type="text" size="30" value="">
            <input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateDelimChar();">
        </div>
        <div>
            <label for="highlightclass">Highlight Classname</label><br>
            <input id="highlightclass" type="text" size="30" value="yui-ac-highlight" maxlength="30">
            <input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateHighlight();">
        </div>
        <div>
            <label for="prehighlightclass">Pre-highlight Classname</label><br>
            <input id="prehighlightclass" type="text" size="30" value="" maxlength="30">
            <input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updatePrehighlight();">
        </div>
        <div>
            <input id="allowbrowserautocomplete" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleAllowBrowserAutocomplete(this);" checked>
            <label for="allowbrowserautocomplete">Allow Browser Autocomplete</label>
        </div>
        <div>
            <input id="alwaysshowcontainer" type="checkbox" onclick="YAHOO.example.ACCustomizable.toggleAlwaysShowContainer(this);">
            <label for="alwaysshowcontainer">Always Show Container</label>
        </div>
        <div>
            <label for="header">Set Header</label>
            <input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateHeader();"><br>
            <textarea id="header" cols="25" rows="5"></textarea>
        </div>
        <div>
            <label for="body">Set Body</label>
            <input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateBody();"><br>
            <textarea id="body" cols="25" rows="5"></textarea>
        </div>
        <div>
            <label for="footer">Set Footer</label>
            <input type="button" value="Update" onclick="YAHOO.example.ACCustomizable.updateFooter();"><br>
            <textarea id="footer" cols="25" rows="5"></textarea>
        </div>
    </form>
    <!-- Panel ends -->
    <!-- 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.ACCustomizable = function(){
    var mylogreader, mylogwriter;
    var oACDS;
    var oAutoComp;

    return {
        init: function() {
            //Logger
            mylogreader = new YAHOO.widget.LogReader("logger");
            mylogwriter = new YAHOO.widget.LogWriter("Custom configs");

            // DataSource 1
            oACDS = new YAHOO.widget.DS_XHR("./examples/autocomplete/php/ysearch_flat.php", ["\n", "\t"]);
            // This is the one non-default value other than constructor params
            oACDS.responseType = YAHOO.widget.DS_XHR.prototype.TYPE_FLAT;

            // AutoComplete 1
            oAutoComp = new YAHOO.widget.AutoComplete('custominput','customcontainer', oACDS);

            var ua = navigator.userAgent.toLowerCase();
            if(ua.indexOf('msie') != -1 && ua.indexOf('opera') < 0) {
                oAutoComp.useIFrame = true;
                YAHOO.util.Dom.get("useiframe").checked = true;
            }
        },

        toggleAnimHoriz: function(animHoriz) {
            oAutoComp.animHoriz = animHoriz.checked;
            mylogwriter.log("Updated animHoriz to " + oAutoComp.animHoriz + ".");
        },

        toggleAnimVert: function(animVert) {
            oAutoComp.animVert = animVert.checked;
            mylogwriter.log("Updated animVert to " + oAutoComp.animVert + ".");
        },

        updateAnimSpeed: function() {
            var animSpeed = document.getElementById("animspeed").value;
            if (isNaN(animSpeed) || (animSpeed < 1)) {
                document.getElementById("animspeed").value = oAutoComp.animSpeed;
                mylogwriter.log("Could not update animSpeed.", "warn");
                return;
            }
            else {
                oAutoComp.animSpeed = animSpeed;
                mylogwriter.log("Updated animSpeed to " + oAutoComp.animSpeed + ".");
            }
        },

        toggleShadow: function(useShadow) {
            oAutoComp.useShadow = useShadow.checked;
            mylogwriter.log("Updated useShadow to " + oAutoComp.useShadow + ".");
        },

        toggleIFrame: function(useIFrame) {
            oAutoComp.useIFrame = useIFrame.checked;
            mylogwriter.log("Updated useIFrame to " + oAutoComp.useIFrame + ".");
        },

        toggleTypeAhead: function(typeAhead) {
            oAutoComp.typeAhead = typeAhead.checked;
            mylogwriter.log("Updated typeAhead to " + oAutoComp.typeAhead + ".");
        },

        toggleForceSelection: function(forceSelection) {
            oAutoComp.forceSelection = forceSelection.checked;
            oAutoComp.forceSelection = forceSelection.checked;
            mylogwriter.log("Updated forceSelection to " + oAutoComp.forceSelection + ".");
        },

        updateMaxResults: function() {
            var maxResults = document.getElementById("maxresults").value;
            if (isNaN(maxResults) || (maxResults < 1)) {
                document.getElementById("maxresults").value = oAutoComp.maxResultsDisplayed;
                mylogwriter.log("Could not update maxResultsDisplayed.", "warn");
                return;
            }
            else {
                oAutoComp.maxResultsDisplayed = maxResults;
                mylogwriter.log("Updated maxResultsDisplayed to " + oAutoComp.maxResultsDisplayed + ".");
            }
        },

        updateMinQueryLength: function() {
            var minQueryLength = document.getElementById("minquerylength").value;
            if (isNaN(minQueryLength) || (minQueryLength < 1)) {
                document.getElementById("minquerylength").value = oAutoComp.minQueryLength;
                mylogwriter.log("Could not update minQueryLength.", "warn");
                return;
            }
            else {
                oAutoComp.minQueryLength = minQueryLength;
                mylogwriter.log("Updated minQueryLength to " + oAutoComp.minQueryLength + ".");
            }
        },

        updateQueryDelay: function() {
            var queryDelay = document.getElementById("querydelay").value;
            if (isNaN(queryDelay) || (queryDelay < 0)) {
                document.getElementById("querydelay").value = oAutoComp.queryDelay;
                mylogwriter.log("Could not update queryDelay.", "warn");
                return;
            }
            else {
                    oAutoComp.queryDelay = queryDelay;
                    mylogwriter.log("Updated query delay to " + oAutoComp.queryDelay + ".");
            }
        },

        updateDelimChar: function() {
            var sValue = document.getElementById("delimchar").value;
            if((sValue.indexOf("[") == 0) && (sValue.indexOf("]") == sValue.length-1)) {
                oAutoComp.delimChar = eval(sValue);
            }
            else if(sValue.length < 2){
                oAutoComp.delimChar = sValue;
            }
            else {
                document.getElementById("delimchar").value = oAutoComp.delimChar;
                mylogwriter.log("Could not update delimChar.", "warn");
                return;
            }
            mylogwriter.log("Updated delimChar to " + oAutoComp.delimChar + ".");
        },

        updateHighlight: function() {
            oAutoComp.highlightClassName = document.getElementById("highlightclass").value;
            mylogwriter.log("Updated highlightClassName to " + oAutoComp.highlightClassName + ".");
        },

        updatePrehighlight: function() {
            oAutoComp.prehighlightClassName = document.getElementById("prehighlightclass").value;
            mylogwriter.log("Updated prehighlightClassName to " + oAutoComp.prehighlightClassName + ".");
        },

        toggleAllowBrowserAutocomplete: function(allowBrowserAutocomplete) {
            oAutoComp.allowBrowserAutocomplete = allowBrowserAutocomplete.checked;
            mylogwriter.log("Updated allowBrowserAutocomplete to " + oAutoComp.allowBrowserAutocomplete + ".");
        },

        toggleAlwaysShowContainer: function(alwaysShowContainer) {
            var container = YAHOO.util.Dom.getElementsByClassName("yui-ac-content","div","customcontainer")[0];
            if(container) {
                oAutoComp.alwaysShowContainer = alwaysShowContainer.checked;
                if(oAutoComp.alwaysShowContainer) {
                    oAutoComp.setBody("alwaysShowContainer enabled");
                }
                else {
                    container.style.height = "0";
                    oAutoComp.setBody();
                }
                mylogwriter.log("Updated alwaysShowContainer to " + oAutoComp.alwaysShowContainer + ".");
            }
            else {
                mylogwriter.log("Could not update alwaysShowContainer.","warn");
            }
        },

        updateHeader: function() {
            var header = document.getElementById("header").value;
            oAutoComp.setHeader(header);
            mylogwriter.log("Header updated.");
        },
        
        updateBody: function() {
            var body = document.getElementById("body").value;
            oAutoComp.setBody(body);
            mylogwriter.log("Body updated.");
        },

        updateFooter: function() {
            var footer = document.getElementById("footer").value;
            oAutoComp.setFooter(footer);
            mylogwriter.log("Footer updated.");
        },

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

YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACCustomizable.init);
</script>
</div>
</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 :: Customized XML Implementation
5.AutoComplete Widget :: JS Array Example
6.AutoComplete Widget :: JS Function Example
7.AutoComplete Widget :: Complex Flat-data Implementation
8.AutoComplete Widget :: Basic JSON Implementation
9.AutoComplete Widget :: Basic XML Implementation
10.Ajax 4 Suggest