This example points to Yahoo! Search Web Services. Custom CSS rules have been applied to achieve the shrink-wrapped, centered search module.
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 | label { color:#E76300;font-weight:bold;} |
4 | #ysearch { text-align:center; } |
5 | #ysearchinput { position:static;width:20em; } /* to center, set static and explicit width: */ |
6 | #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"> |
2 | <div id="ysearch"> |
3 | <label for="ysearchinput">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.Centered = function() { |
2 | var myDataSource = new YAHOO.util.XHRDataSource("assets/php/ysearch_proxy.php?output=json&"); |
3 | myDataSource.responseSchema = { |
4 | resultsList: "ResultSet.Result", |
5 | fields: ["Title"] |
6 | }; |
7 | |
8 | // Instantiate AutoComplete |
9 | var myAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", myDataSource); |
10 | myAutoComp.queryMatchContains = true; |
11 | myAutoComp.queryQuestionMark = false; |
12 | myAutoComp.useShadow = true; |
13 | |
14 | return { |
15 | oDS: myDataSource, |
16 | oAC: myAutoComp |
17 | }; |
18 | }(); |
view plain | print | ? |
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
INFO 102ms (+68) 6:53:37 PM:
LogReader instance0
LogReader initialized
INFO 34ms (+3) 6:53:37 PM:
AutoComplete instance0 ysearchinput
AutoComplete initialized
INFO 31ms (+31) 6:53:37 PM:
DataSource instance0
DataSource initialized
INFO 0ms (+0) 6:53:37 PM:
global
Logger initialized
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings