Ajax Layer JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. Ajax Layer
  4. AutoComplete Widget



AutoComplete Widget :: Basic XML Implementation






    #ysearchmod {position:relative;padding:1em;}
    #ysearchautocomplete {position:relative;margin:1em;width:40%;}/* set width of widget here*/
    #ysearchinput {position:absolute;width:100%;height:1.4em;}
    #ysearchcontainer {position:absolute;top:1.7em;width:100%;}
    #ysearchcontainer .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
    #ysearchcontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
    #ysearchcontainer ul {padding:5px 0;width:100%;}
    #ysearchcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
    #ysearchcontainer li.yui-ac-highlight {background:#ff0;}




    

AutoComplete Widget :: XML Data Yahoo! Search Web Services




    
    

    
    
    

DataSource


    

This DataSource instance points to Yahoo! Search Web Services, via a
    simple PHP proxy. The DataSource schema is defined for XML data. In order
    to be compatible with the Yahoo! Search application, the DataSource's
    queryMatchContains is set to true, and the scriptQueryAppend has been
    defined to pass in additional arguments.


    

AutoComplete


    

This AutoComplete instance uses only default configuration values.


    
    
        
            

Yahoo! Search


            
                
                

            
        
    
    
    
    
    
        

Sample Code


        

CSS:


        
        
            #ysearchmod {position:relative;padding:1em;}
            #ysearchautocomplete {position:relative;margin:1em;width:40%;}/* set width of widget here*/
            #ysearchinput {position:absolute;width:100%;height:1.4em;}
            #ysearchcontainer {position:absolute;top:1.7em;width:100%;}
            #ysearchcontainer .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
            #ysearchcontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
            #ysearchcontainer ul {padding:5px 0;width:100%;}
            #ysearchcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
            #ysearchcontainer li.yui-ac-highlight {background:#ff0;}
        
        

Markup:


        
        
            
            
                
                    

Yahoo! Search


                    
                        
                        
                    
                
            
            
        
        

JavaScript:


        
        
            // Instantiate an XHR DataSource and define schema as an array:
            //     ["Multi-depth.object.notation.to.find.a.single.result.item",
            //     "Query Key",
            //     "Additional Param Name 1",
            //     ...
            //     "Additional Param Name n"]
            oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_proxy.php", ["Result", "Title"]);
            oACDS.responseType = oACDS.TYPE_XML;
            oACDS.queryMatchContains = true;
            oACDS.scriptQueryAppend = "results=100"; // Needed for YWS
            // Instantiate AutoComplete
            oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", oACDS);
        
    
    












YAHOO.example.ACXml = function(){
    var mylogger;
    var oACDS;
    var oAutoComp;
    return {
        init: function() {
            //Logger
            mylogger = new YAHOO.widget.LogReader("logger");
            // Instantiate an XHR DataSource and define schema as an array:
            //     ["Multi-depth.object.notation.to.find.a.single.result.item",
            //     "Query Key",
            //     "Additional Param Name 1",
            //     ...
            //     "Additional Param Name n"]
            oACDS = new YAHOO.widget.DS_XHR("./examples/autocomplete/php/ysearch_proxy.php", ["Result", "Title"]);
            oACDS.responseType = oACDS.TYPE_XML;
            oACDS.queryMatchContains = true;
            oACDS.scriptQueryAppend = "results=100"; // Needed for YWS
            // Instantiate AutoComplete
            oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", oACDS);
        },
        validateForm: function() {
            // Validate form inputs here
            return false;
        }
    };
}();
YAHOO.util.Event.addListener(this,"load",YAHOO.example.ACXml.init);



dp.SyntaxHighlighter.HighlightAll('code');



           
       
yui.zip( 3,714 k)