428N/A<style scoped>

2362N/A#ac-input { width: 250px; }

428N/A</style>

428N/A

428N/A<div class="intro">

428N/A<p>

428N/AThis example demonstrates how to provide autocomplete suggestions using a YQL query as the source. In this case, we're using the <a href="http://developer.yahoo.com/yql/console/#h=select%20*%20from%20search.suggest%20where%20query%3D%22yui%20autocomplete%22">`search.suggest` YQL table</a> to provide suggestions based on popular Yahoo! Search queries.

428N/A</p>

428N/A</div>

428N/A

428N/A<div class="example">

428N/A {{>ac-yql-source}}

428N/A</div>

428N/A

428N/A<h2>HTML</h2>

428N/A

428N/A```

428N/A<div id="demo" class="yui3-skin-sam">

2362N/A <label for="ac-input">Search:</label><br>

2362N/A <input id="ac-input" type="text">

2362N/A</div>

428N/A```

428N/A

428N/A<h2>JavaScript</h2>

428N/A

428N/A```

428N/AYUI().use('autocomplete', 'autocomplete-highlighters', function (Y) {

428N/A Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {

428N/A resultHighlighter: 'phraseMatch',

428N/A source: 'select * from search.suggest where query="{query}"'

428N/A });

428N/A});

428N/A```

428N/A

428N/A<h2>Complete Example Source</h2>

428N/A

428N/A```

428N/A{{>ac-yql-source}}

428N/A```

428N/A