On the page where you want auto-complete to appear instead of a <select> tag that Dojo uses, you need to use two tags, <input type="text"> and a hidden <div>.
<input name="query" id="query" type="text" size="50"
maxlength="100" class="content" value="">
<div id="auto_complete" class="autocomplete"></div>
You also need to put in a little JavaScript code to tie the two together and tell Scriptaculous which input field you what to have Ajax properties, with the new Ajax.Autocompleter object. This object has three main parameters: The first parameter is the INPUT field id, the second is the DIV id, and the third is the URL, which should return dynamic suggestions. This object also has optional parameters, such as the minimum number of characters required for the query be auto submitted to the server.
<script>
// basic implementaion
//new Ajax.Autocompleter("query", "auto_complete",
"autocomplete.php", {});
// implementaion with parameters
new Ajax.Autocompleter("query", "auto_complete",
"autocomplete.php", {paramName:
"query_auto_complete", minChars: 2});
</script>
The server side must return its response in a specific format, such as:
<ul>
<li>guestrooms</li>
<li>guppy</li>
</ul>
And the UI can look what's shown in Figure 6.
Figure 6: Scriptaculous Auto-complete demo
Please see the included source code for the full demo.
Implementation in the Yahoo User Interface (YUI) Library
YUI is similar in implementation to Scriptaculous. It also needs to have a style defined.
<style type="text/css">
#statesautocomplete,
#statesautocomplete2 {
width:15em;
padding-bottom:2em;
}
#statesautocomplete {
z-index:9000; }
#statesinput,
#statesinput2 {
_position:absolute; /* abs pos needed for IE quirks */
}
YUI requires import of the main YUI JavaScript files on the page where you want this widget or on the main header.
<script type="text/javascript"
src="yui_auto_complete_demo.js"></script>
<link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts-min.css?_yuiversion=2.4.1" />
<link rel="stylesheet"
type="text/css" href="../../build/autocomplete/assets/skins/
sam/autocomplete.css?_yuiversion=2.4.1" />
<script type="text/javascript"
src="../../build/yahoo-dom-event/
yahoo-dom-event.js?_yuiversion=2.4.1"></script>
<script type="text/javascript"
src="../../build/animation/animation.js?_yuiversion=2.4.1">
</script>
<script type="text/javascript"
src="../../build/autocomplete/
autocomplete.js?_yuiversion=2.4.1">
</script>
</head>
On the page itself the code is trivial, and again similarly to the Scriptaculous, uses an input filed and a div, with the only difference that they are enclosed in the following:
<div id="statesautocomplete">
<input id="statesinput" type="text">
<div id="statescontainer"></div>
</div>
The tying code of the JavaScript Ajax APIs with the HTML INPUT and DIV elements is achieved with the JS YAHOO.widget.AutoComplete object; it takes as parameters the names of the input, div, and dynamic content source. There are also a lot more JavaScript options in YUI than in Scriptaculous. For example, there is an option to fill in the first suggestion in the input field (ex typeAhead = true). Please see the included source code for the full demo.
this.oAutoComp =
new YAHOO.widget.AutoComplete('statesinput','statescontainer',
this.oACDS);
this.oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
this.oAutoComp.typeAhead = true;
this.oAutoComp.useShadow = true;
this.oAutoComp.minQueryLength = 0;
this.oAutoComp.textboxFocusEvent.subscribe(function(){
var sInputValue = YAHOO.util.Dom.get('statesinput').value;
if(sInputValue.length === 0) {
var oSelf = this;
setTimeout(function(){oSelf.sendQuery(sInputValue);},0);
}
});
IE 7
Firefox 2.0
