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
<div id="demo"> <label for="ac-input">Enter the name of a US state:</label><br> <input id="ac-input" type="text"> </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
var states = [ 'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', ... ];
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 }); });
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"> <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>
<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>