yunshichen

< html >
<!-- CSS file (default YUI Sam Skin)  -->
< link  type ="text/css"  rel ="stylesheet"  href ="http://yui.yahooapis.com/2.5.2/build/autocomplete/assets/skins/sam/autocomplete-skin.css" >

<!--  Dependencies  -->
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js" ></ script >

<!--  OPTIONAL: Connection (required only if using XHR DataSource)  -->
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/connection/connection-debug.js" ></ script >

<!--  OPTIONAL: JSON (enables JSON validation)  -->
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/json/json-debug.js" ></ script >
<!--  Source file  -->
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/autocomplete/autocomplete-debug.js" ></ script >

<!-- ================== Logger ====================  -->
< link  type ="text/css"  rel ="stylesheet"  href ="http://yui.yahooapis.com/2.5.2/build/logger/assets/skins/sam/logger.css" >
< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.5.2/build/logger/logger-debug.js" ></ script >

< style  type ="text/css" >
#myAutoComplete  {
    width : 15em ;   /*  set width here  */
    padding-bottom : 2em ;
}
</ style >
< body  class =" yui-skin-sam" >
< div  id ="myLogger" ></ div >< br >
< hr >
Change datasource :
&nbsp;&nbsp;&nbsp; < input  type ="button"  id ="jsBtn"  value ="JS array"   />
&nbsp;&nbsp;&nbsp; < input  type ="button"  id ="funcBtn"  value ="JS function"   />
< br >< br >
< div  id ="myAutoComplete" >
     < input  id ="myInput"  type ="text" >
     < div  id ="myContainer" ></ div >
</ div >
< script  type ="text/javascript" >

// A JS array data source
var  testData = [ " fa " ,  " fb " ,  " fc " ];
//  A JavaScript Function DataSource
function  myFunction(sQuery) {
    aResults  =  [];
     if  (sQuery  &&  sQuery.length  >   0 ) {
         var  charKey  =  sQuery.substring( 0 ,  1 ).toLowerCase();
         var  oResponse  =  dataset[charKey];
         if  (oResponse) {
             for  ( var  i  =  oResponse.length  -   1 ; i  >=   0 ; i -- ) {
                 var  sKey  =  oResponse[i].STATE;
                 var  sKeyIndex  =  encodeURI(sKey.toLowerCase()).indexOf(sQuery.toLowerCase());
                 if  (sKeyIndex  ===   0 ) {
                    aResults.unshift([sKey, oResponse[i].ABBR]);
                }
            }
             return  aResults;
        }
    }  else  {
         for  ( var  letter  in  dataset) {
             var  oResponse  =  dataset[letter];
             for ( var  i  =   0 ; i  <  oResponse.length; i ++ ) {
                aResults.push([oResponse[i].STATE, oResponse[i].ABBR]);
            }
        }
         return  aResults;
    }
}

var  dataset  =  {
    'a' : [{ " STATE "  :  " Alabama " ,  " ABBR "  :  " AL " },
        { " STATE "  :  " Alaska " ,  " ABBR "  :  " AK " },
        { " STATE "  :  " Arizona " ,  " ABBR "  :  " AZ " },
        { " STATE "  :  " Arkansas " ,  " ABBR "  :  " AR " }],
    'b' : [ ],
    'c' : [{ " STATE "  :  " California " ,  " ABBR "  :  " CA " },
        { " STATE "  :  " Colorado " ,  " ABBR "  :  " CO " },
        { " STATE "  :  " Connecticut " ,  " ABBR "  :  " CT " }],
      //  Entire dataset not shown
};


// Init autocomplete component.
var  g_oAuto = new   function (){    
     // ============ init logger
     this .logger  =   new  YAHOO.widget.LogReader( " myLogger " ); 
     this .myDatasource  =   new  YAHOO.widget.DS_JSFunction(myFunction);
     this .myAutoComp = new  YAHOO.widget.AutoComplete( " myInput " , " myContainer " ,  this .myDatasource);
};

// Util functions.
function  changeDSToJsArray(){    
    g_oAuto.myAutoComp.dataSource =   new  YAHOO.widget.DS_JSArray(testData);
    YAHOO.log( " Changed data source to JS array " , " info " , this .toString());
};
function  changeDSToJsFunction(){
    g_oAuto.myAutoComp.dataSource =   new  YAHOO.widget.DS_JSFunction(myFunction);
     // Customize result view.
    g_oAuto.myAutoComp.formatResult  =   function (oResultItem, sQuery) {
         var  sMarkup  =  oResultItem[ 0 ]  +   "  ( "   +  oResultItem[ 1 ]  +   " ) " ;
         return  (sMarkup);
    };

    YAHOO.log( " Changed data source to JS function " , " info " , this .toString());
};

// Set button event handlers.
var  btn  =  YAHOO.util.Dom.get( " jsBtn " );
btn.onclick = changeDSToJsArray;

btn  =  YAHOO.util.Dom.get( " funcBtn " );
btn.onclick = changeDSToJsFunction;


</ script >

</ body >
</ html >