YUI Library Home

YUI Library Examples: AutoComplete Control: Basic Local Data

AutoComplete Control: Basic Local Data

This AutoComplete implementation points to a JavaScript array that is available in-memory, allowing for a zippy user interaction without the need for a server-side component. Enabling the prehighlightClassName and useShadow features, as well as pulling in the Animation utility, provides an ehanced visual user experience.

View example in new window.

Enter a state:

Sample Code

Data:

1YAHOO.example.Data.arrayStates = [ 
2    "Alabama", 
3    "Alaska", 
4    "Arizona", 
5    "Arkansas", 
6    "California", 
7    "Colorado", 
8    "Connecticut", 
9    "Delaware", 
10    "Florida", 
11    ... 
12]; 
view plain | print | ?

CSS:

1#myAutoComplete { 
2    width:15em; /* set width here or else widget will expand to fit its container */ 
3    padding-bottom:2em; 
4} 
view plain | print | ?

Markup:

1<div id="myAutoComplete"> 
2    <input id="myInput" type="text"> 
3    <div id="myContainer"></div> 
4</div> 
view plain | print | ?

JavaScript:

1YAHOO.example.BasicLocal = function() { 
2    // Use a LocalDataSource 
3    var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.arrayStates); 
4    // Optional to define fields for single-dimensional array 
5    oDS.responseSchema = {fields : ["state"]}; 
6 
7    // Instantiate the AutoComplete 
8    var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS); 
9    oAC.prehighlightClassName = "yui-ac-prehighlight"; 
10    oAC.useShadow = true; 
11     
12    return { 
13        oDS: oDS, 
14        oAC: oAC 
15    }; 
16}(); 
view plain | print | ?

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

More AutoComplete Control Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings