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

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

This example's DataSource instance points to Yahoo! Search Web Services, which returns JSON data via a simple PHP proxy. The DataSource schema will parse the return data for fields named "Title", "Summary", and "Cache". In order for the Yahoo! Search application to return valid data, the DataSource property scriptQueryAppend is used to pass along all the required query parameters, and the property queryMatchContains has been enabled.

To achieve the shrink-wrapped, centered search module, custom CSS rules have been applied, and the method doBeforeExpandContainer has been customized to position the container directly below the input field.

Sample Code

CSS:

1/* custom styles for centered example */ 
2body, h1 { margin:0;padding:0} /* needed for known issue with Dom.getXY() in safari for absolute elements in positioned containers */ 
3#ysearch { text-align:center} 
4#ysearchinput { position:static;width:20em} /* to center, set static and explicit width: */ 
5#ysearchcontainer { text-align:left;width:20em} /* to center, set left-align and explicit width: */ 
view plain | print | ?

Markup:

1<form action="http://search.yahoo.com/search" onsubmit="return YAHOO.example.ACJson.validateForm();"
2    <div id="ysearch"
3        <label>Yahoo! Search: </label> 
4        <input id="ysearchinput" type="text" name="p"
5        <input id="ysearchsubmit" type="submit" value="Submit Query"
6        <div id="ysearchcontainer"></div> 
7    </div> 
8</form> 
view plain | print | ?

JavaScript:

1YAHOO.example.ACJson = 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", ["ResultSet.Result","Title"]); 
9    this.oACDS.queryMatchContains = true
10    this.oACDS.scriptQueryAppend = "output=json&results=100"// Needed for YWS 
11 
12    // Instantiate AutoComplete 
13    this.oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer"this.oACDS); 
14    this.oAutoComp.useShadow = true
15    this.oAutoComp.formatResult = function(oResultItem, sQuery) { 
16        return oResultItem[1].Title + " (" + oResultItem[1].Url + ")"
17    }; 
18    this.oAutoComp.doBeforeExpandContainer = function(oTextbox, oContainer, sQuery, aResults) { 
19        var pos = YAHOO.util.Dom.getXY(oTextbox); 
20        pos[1] += YAHOO.util.Dom.get(oTextbox).offsetHeight + 2; 
21        YAHOO.util.Dom.setXY(oContainer,pos); 
22        return true
23    }; 
24 
25    // Stub for form validation 
26    this.validateForm = function() { 
27        // Validation code goes here 
28        return true
29    }; 
30}; 
view plain | print | ?

Copyright © 2007 Yahoo! Inc. All rights reserved.

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