YUI – howto use AUTOCOMPLETE

YUI is Yahoo User Interface LIBrary

Original source is here.

I need Autocomplete for input text, named Country

* You should of couse, have YOU library on your server (in situation it is placed in /include/yui/ folder ) !

1. Insert links & JS libs :

<link rel="stylesheet" type="text/css" href="./include/yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="/include/yui/build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="/include/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="/include/yui/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="/include/yui/build/element/element-min.js"></script>
<script type="text/javascript" src="/include/yui/build/button/button-min.js"></script>
<script type="text/javascript" src="/include/yui/build/calendar/calendar-min.js"></script>
<script type="text/javascript" src="/include/yui/build/tabview/tabview-min.js"></script>

<!-- // YUI AUTOCOMPLETE // -->
<link rel="stylesheet" type="text/css" href="/include/yui/build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="/include/yui/build/animation/animation-min.js"></script>
<script type="text/javascript" src="/include/yui/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="/include/yui/build/autocomplete/autocomplete-min.js"></script>

<!-- // COUNTRY : start //-->
<style type="text/css">
#myAutoComplete {
 width: 100%; /* set width here or else widget will expand to fit its container */
 padding-bottom: 2em;
}
#myInput {
 width: 100%; /* set width here or else widget will expand to fit its container */
}
</style>

2. Insert into HTML page input text with container (for autocomplete)

Country
 <input name="country_code" type="hidden" id="country_code" tabindex="80" value="{country_code}" size="20" maxlength="2" readonly="yes" />
<div id="myAutoComplete"><input type="text" id="myInput"><div id="myContainer"></div></div>

3. Prepare data for country

if (typeof _2M == "undefined" || !_2M ) {
 var _2M = {};
}
_2M.Data = {
    arrayCountryCodes: [
        ["Afghanistan", "AF"],
        ["Aland Islands", "AX"],
        ["Albania", "AL"],
        ["Algeria", "DZ"],
        ["American Samoa", "AS"],
        ["Andorra", "AD"],
    ]
};

4. Add avaScript code for AUTOCOMPLETE can work : we have hidden field, in which we should get country code(!, and in visible Input text we should get full country name (e.g. Austria or Finland)

<SCRIPT type="text/JavaScript">

///*
YAHOO.example.BasicLocal = function() {
 // Use a LocalDataSource
 var oDS = new YAHOO.util.LocalDataSource(_2MData.arrayCountryCodes);
 // Optional to define fields for single-dimensional array
 oDS.responseSchema = {fields : ["country", "code"]};

 // Instantiate AutoCompletes
 var oConfigs = {
 prehighlightClassName: "yui-ac-prehighlight",
 useShadow: true,
 queryDelay: 0,
 minQueryLength: 0,
 animVert: 0
 }
 
 // Instantiate the AutoComplete
 var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS, oConfigs );
 oAC.prehighlightClassName = "yui-ac-prehighlight";
 oAC.useShadow = true;
 
 oAC.resultTypeList = false;
 oAC.formatResult = function(oResultData, sQuery, sResultMatch) {
 return (oResultData.country);
 };

 // Define an event handler to populate a hidden form field
 // when an item gets selected and populate the input field
 var myHiddenField = YAHOO.util.Dom.get("country_code");
 var myHandler = function(sType, aArgs) {
 var myAC = aArgs[0]; // reference back to the AC instance
 var elLI = aArgs[1]; // reference to the selected LI element
 var oData = aArgs[2]; // object literal of selected item's result data
 
 // update hidden form field with the selected item's ID
 myHiddenField.value = oData.code;
 
 //myAC.getInputEl().value = oData.fname + " " + oData.lname + (oData.nname ? " (" + oData.nname + ")" : "");
 //myAC.getInputEl().value = "";
 };
 oAC.itemSelectEvent.subscribe(myHandler);
 
 return {
 oDS: oDS,
 oAC: oAC
 };
}();
</script>