YUI 3.x Home -

YUI Library Examples: AutoComplete: Basic Local Data

AutoComplete: Basic Local Data

This example demonstrates how to provide autocomplete suggestions from local data in an array. Since lookups are performed entirely on the client, this example doesn't require any remote requests, and suggestions are displayed almost instantly.


HTML

  1. <div id="demo">
  2. <label for="ac-input">Enter the name of a US state:</label><br>
  3. <input id="ac-input" type="text">
  4. </div>
<div id="demo">
  <label for="ac-input">Enter the name of a US state:</label><br>
  <input id="ac-input" type="text">
</div>

JavaScript

Data

  1. var states = [
  2. 'Alabama',
  3. 'Alaska',
  4. 'Arizona',
  5. 'Arkansas',
  6. 'California',
  7. ...
  8. ];
var states = [
  'Alabama',
  'Alaska',
  'Arizona',
  'Arkansas',
  'California',
  ...
];

Implementation

  1. YUI().use("autocomplete", "autocomplete-filters", "autocomplete-highlighters", function (Y) {
  2. Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
  3. resultFilters : 'phraseMatch',
  4. resultHighlighter: 'phraseMatch',
  5. source : states
  6. });
  7. });
YUI().use("autocomplete", "autocomplete-filters", "autocomplete-highlighters", function (Y) {
  Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
    resultFilters    : 'phraseMatch',
    resultHighlighter: 'phraseMatch',
    source           : states
  });
});

Complete Example Source

  1. <div id="demo">
  2. <label for="ac-input">Enter the name of a US state:</label><br>
  3. <input id="ac-input" type="text">
  4. </div>
  5.  
  6. <script>
  7. YUI().use("autocomplete", "autocomplete-filters", "autocomplete-highlighters", function (Y) {
  8. var states = [
  9. 'Alabama',
  10. 'Alaska',
  11. 'Arizona',
  12. 'Arkansas',
  13. 'California',
  14. 'Colorado',
  15. 'Connecticut',
  16. 'Delaware',
  17. 'Florida',
  18. 'Georgia',
  19. 'Hawaii',
  20. 'Idaho',
  21. 'Illinois',
  22. 'Indiana',
  23. 'Iowa',
  24. 'Kansas',
  25. 'Kentucky',
  26. 'Louisiana',
  27. 'Maine',
  28. 'Maryland',
  29. 'Massachusetts',
  30. 'Michigan',
  31. 'Minnesota',
  32. 'Mississippi',
  33. 'Missouri',
  34. 'Montana',
  35. 'Nebraska',
  36. 'Nevada',
  37. 'New Hampshire',
  38. 'New Jersey',
  39. 'New Mexico',
  40. 'New York',
  41. 'North Dakota',
  42. 'North Carolina',
  43. 'Ohio',
  44. 'Oklahoma',
  45. 'Oregon',
  46. 'Pennsylvania',
  47. 'Rhode Island',
  48. 'South Carolina',
  49. 'South Dakota',
  50. 'Tennessee',
  51. 'Texas',
  52. 'Utah',
  53. 'Vermont',
  54. 'Virginia',
  55. 'Washington',
  56. 'West Virginia',
  57. 'Wisconsin',
  58. 'Wyoming'
  59. ];
  60.  
  61. Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
  62. resultFilters : 'phraseMatch',
  63. resultHighlighter: 'phraseMatch',
  64. source : states
  65. });
  66. });
  67. </script>
<div id="demo">
  <label for="ac-input">Enter the name of a US state:</label><br>
  <input id="ac-input" type="text">
</div>
 
<script>
YUI().use("autocomplete", "autocomplete-filters", "autocomplete-highlighters", function (Y) {
  var states = [
    'Alabama',
    'Alaska',
    'Arizona',
    'Arkansas',
    'California',
    'Colorado',
    'Connecticut',
    'Delaware',
    'Florida',
    'Georgia',
    'Hawaii',
    'Idaho',
    'Illinois',
    'Indiana',
    'Iowa',
    'Kansas',
    'Kentucky',
    'Louisiana',
    'Maine',
    'Maryland',
    'Massachusetts',
    'Michigan',
    'Minnesota',
    'Mississippi',
    'Missouri',
    'Montana',
    'Nebraska',
    'Nevada',
    'New Hampshire',
    'New Jersey',
    'New Mexico',
    'New York',
    'North Dakota',
    'North Carolina',
    'Ohio',
    'Oklahoma',
    'Oregon',
    'Pennsylvania',
    'Rhode Island',
    'South Carolina',
    'South Dakota',
    'Tennessee',
    'Texas',
    'Utah',
    'Vermont',
    'Virginia',
    'Washington',
    'West Virginia',
    'Wisconsin',
    'Wyoming'
  ];
 
  Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
    resultFilters    : 'phraseMatch',
    resultHighlighter: 'phraseMatch',
    source           : states
  });
});
</script>

Copyright © 2011 Yahoo! Inc. All rights reserved.

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