Fork me on GitHub

Example: Basic autocomplete creation

How to create an autocomplete field.

HTML

<div id="field-container"></div>

JavaScript

Implementation

YUI().use('inputex-autocomplete', 'autocomplete-filters', 'autocomplete-highlighters', function(Y) {
   
   var field = Y.inputEx({
      type: "autocomplete",
      parentEl: 'field-container', 
      label: 'Search US state',

      // Format the hidden value (value returned by the form)
      returnValue: function (oResultItem) {
         return oResultItem;
      },
      autoComp: { // options of the YUI3 autocompleter (see http://yuilibrary.com/yui/docs/autocomplete/#config)
         minQueryLength: 2,
         maxResults: 50,
         resultFilters: 'phraseMatch',
         resultHighlighter: 'phraseMatch',
         source: [
             '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.Node.create("<button>Get Value</button>").appendTo('#log-container').on( 'click', function() {
      alert( field.getValue() );
   });

   field.on("updated", function(value) {
      Y.one('#log-container').append("<div>Updated at "+(new Date())+" with value '"+value+"'</div>");
   });

});