Example: 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

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">Enter the name of a US state:</label><br>
  <input id="ac-input" type="text">
</div>

JavaScript

Data

var states = [
  'Alabama',
  'Alaska',
  'Arizona',
  'Arkansas',
  'California',
  ...
];

Implementation

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

<div id="demo" class="yui3-skin-sam"> <!-- You need this skin class -->
  <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>

Examples