autocomplete-prerelease-example.html revision b1ec001afbb5c5d84675023047109f2a42748bd0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AutoComplete prerelease example</title>
<style>
html {
background: #fff;
color: #333;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
font-size: 13px;
}
#ac-input {
margin: 5px 0 10px;
width: 300px;
}
</style>
</head>
<body class="yui3-skin-sam">
<h1>AutoComplete prerelease example</h1>
<p>
This is a simple example of an autocomplete list widget that displays
suggestions from Yahoo! Search. Begin typing a query in the input field below to
see suggestions.
</p>
<div id="ac">
<label for="ac-input">Yahoo! Search:</label><br>
<input type="text" id="ac-input" name="p">
<input type="submit" value="Search">
<div id="ac-list"></div>
</div>
</form>
<!--
fuji.jetpants.com provides a combo-hosted version of the latest YUI3 git master
code, but it's for testing only. Please don't use it for production, as it is
not a CDN and will occasionally be unavailable.
-->
<script src="http://fuji.jetpants.com/yui/yui3/combo?build/yui/yui-min.js&build/loader/loader-min.js"></script>
<!-- <script src="/build/yui/yui-min.js"></script> -->
<script>
var Y = YUI({
comboBase: 'http://fuji.jetpants.com/yui/yui3/combo?',
combine : true,
root : 'build/'
}).use('autocomplete', 'autocomplete-highlighters', function (Y) {
// Assigning the instance to Y.ac for easier console tinkering.
Y.ac = new Y.AutoCompleteList({
boundingBox : '#ac-list',
inputNode : '#ac-input',
render : true,
resultHighlighter: Y.AutoCompleteHighlighters.phraseMatch,
source : 'http://query.yahooapis.com/v1/public/yql?format=json&q=select%20*%20from%20search.suggest%20where%20query%3D%22{query}%22&callback={callback}'
});
});
</script>
</body>
</html>