Thursday 6 September 2007

AJAX & Web 2.0 Tutorial (Section 4) - Yahoo User Interface (YUI )




  1. The Yahoo! User Interface Library is a set of utilities and controls that make your life easier;
  2. They’re released under a BSD style license;
  3. Apart from solving cross browser problems, the library also includes code to do a lot of nifty things;
  4. The library is available at http://developer.yahoo.com/yui/
  5. Please go download the library and set it up in your development environment; :-)
  6. Auto Complete is one of those nice finishing touches that can make most websites just seem better. It’s also a perfect case of supplementing the user experience, rather than providing it, worst case scenario the user doesn’t receivethe drop down.

Sample Code:

<script type="text/javascript">
YAHOO.example.ACFlatData = function(){
var mylogger;
var oACDS;
var oAutoComp0,oAutoComp1,oAutoComp2;
return {
init: function() {
mylogger = new YAHOO.widget.LogReader("logger");
oACDS = new YAHOO.widget.DS_XHR("./sampleAutoComplete.php", ["\n", "\t"]);
oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_FLAT;
oACDS.maxCacheEntries = 60;
oACDS.queryMatchSubset = true;
oAutoComp2 = new YAHOO.widget.AutoComplete
('ysearchinput2','ysearchcontainer2', oACDS);
oAutoComp2.delimChar = ";";
oAutoComp2.queryDelay = 0;
oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
},

validateForm: function() {
return false;
}
};
}();
YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACFlatData.init);
</script>

1 comment:

Anonymous said...

Thanks for sharing this Yahoo UI autocomplete. I agree it's one of those nice things that the user will appreciate.