Fork me on GitHub

Example: Basic autocomplete creation

How to create an autocomplete field.


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



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
         minQueryLength: 2,
         maxResults: 50,
         resultFilters: 'phraseMatch',
         resultHighlighter: 'phraseMatch',
         source: [
             'New Hampshire',
             'New Jersey',
             'New Mexico',
             'New York',
             'North Dakota',
             'North Carolina',
             'Rhode Island',
             'South Carolina',
             'South Dakota',
             'West Virginia',

   Y.Node.create("<button>Get Value</button>").appendTo('#log-container').on( 'click', function() {
      alert( field.getValue() );

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