YUI Library Examples: AutoComplete Control: Use AutoComplete to access the Yahoo! Search XML API

AutoComplete Control: Use AutoComplete to access the Yahoo! Search XML API

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 property queryMatchContains is enabled, and the scriptQueryAppend has been defined to pass in additional arguments.

Yahoo! Search:

Sample Code

CSS:

1/* custom styles for this example */ 
2#ysearchautocomplete { margin-bottom:2em;width:25em} 
view plain | print | ?

Markup:

1<form action="http://search.yahoo.com/search" onsubmit="return YAHOO.example.ACXml.validateForm();"
2    <h3>Yahoo! Search:</h3> 
3    <div id="ysearchautocomplete"
4        <input id="ysearchinput" type="text" name="p"
5        <div id="ysearchcontainer"></div> 
6    </div> 
7</form> 
view plain | print | ?

JavaScript:

1YAHOO.example.ACXml = new function(){ 
2    // Instantiate an XHR DataSource and define schema as an array: 
3    //     ["Multi-depth.object.notation.to.find.a.single.result.item", 
4    //     "Query Key", 
5    //     "Additional Param Name 1", 
6    //     ... 
7    //     "Additional Param Name n"] 
8    this.oACDS = new YAHOO.widget.DS_XHR("assets/php/ysearch_proxy.php", ["Result""Title"]); 
9    this.oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_XML; 
10    this.oACDS.queryMatchContains = true
11    this.oACDS.scriptQueryAppend = "results=100"// Needed for YWS 
12 
13    // Instantiate AutoComplete 
14    this.oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer"this.oACDS); 
15 
16    // Stub for AutoComplete form validation 
17    this.validateForm = function() { 
18        // Validation code goes here 
19        return true
20    }; 
21}; 
view plain | print | ?

YUI Logger Output:

Logger Console

INFO690ms (+117) 3:06:10 PM:

LogReader instance0

LogReader initialized

INFO573ms (+1) 3:06:10 PM:

AutoComplete instance0 ysearchinput

AutoComplete initialized

INFO572ms (+572) 3:06:10 PM:

DataSource instance0

XHR DataSource initialized

INFO0ms (+0) 3:06:10 PM:

global

Logger initialized

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

More AutoComplete Control Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

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