YUI 3.x Home -

YUI Library Examples: AutoComplete: Remote Data via YQL

AutoComplete: Remote Data via YQL

This example demonstrates how to provide autocomplete suggestions using a YQL query as the source. In this case, we're using the search.suggest YQL table to provide suggestions based on popular Yahoo! Search queries.


HTML

  1. <div id="demo">
  2. <label for="ac-input">Search:</label><br>
  3. <input id="ac-input" type="text">
  4. </div>
<div id="demo">
  <label for="ac-input">Search:</label><br>
  <input id="ac-input" type="text">
</div>

JavaScript

  1. YUI().use("autocomplete", "autocomplete-highlighters", function (Y) {
  2. Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
  3. resultHighlighter: 'phraseMatch',
  4. source: 'select * from search.suggest where query="{query}"'
  5. });
  6. });
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}"'
  });
});

Complete Example Source

  1. <div id="demo">
  2. <label for="ac-input">Search:</label><br>
  3. <input id="ac-input" type="text">
  4. </div>
  5.  
  6. <script>
  7. YUI().use("autocomplete", "autocomplete-highlighters", function (Y) {
  8. Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
  9. resultHighlighter: 'phraseMatch',
  10. source: 'select * from search.suggest where query="{query}"'
  11. });
  12. });
  13. </script>
<div id="demo">
  <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}"'
  });
});
</script>

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings