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.
CSS:
1 | /* custom styles for centered example */ |
2 | body, 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:
1 | YAHOO.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 | ? |
Note: Logging and debugging is currently turned off for this example.
Copyright © 2007 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings