This example demonstrates how to provide autocomplete suggestions using a YQL query as the source. In this case, we're using a custom search.suggest YQL table to provide suggestions based on popular Yahoo Search queries.
Note: If the Yahoo Search API is unavailable, you can try this example with mock data. Try typing in "ca" to see the results.
Note: be sure to add the yui3-skin-sam classname to the
page's <body> element or to a parent element of the widget in order to apply
the default CSS skin. See Understanding Skinning.
<div id="demo" class="yui3-skin-sam"> <!-- You need this skin class --> <label for="ac-input">Search:</label><br> <input id="ac-input" type="text"> </div>
YUI().use('autocomplete', 'autocomplete-highlighters', function (Y) {
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
resultHighlighter: 'phraseMatch',
source: 'select * from search.suggest where query="{query}"',
yqlEnv: 'http://pieisgood.org/yql/tables.env'
});
});
<div id="demo" class="yui3-skin-sam"> <!-- You need this skin class -->
<label for="ac-input">Search:</label><br>
<input id="ac-input" type="text">
</div>
<script>
YUI().use('autocomplete', 'autocomplete-highlighters', function (Y) {
Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
resultHighlighter: 'phraseMatch',
source: 'select * from search.suggest where query="{query}"',
yqlEnv: 'http://pieisgood.org/yql/tables.env'
});
});
</script>