inputEx - Autocomplete Usage

Basic Autocomplete creation

Use the following code to create a basic inputEx Autocomplete.

        
         var field = inputEx({
            type: "autocomplete",
            parentEl: 'container1', 
            label: 'Search US state',

            // Format the hidden value (value returned by the form)
            returnValue: function(oResultItem) {
               return oResultItem.value;
            },
            autoComp: {// options of the YUI3 autocompleter (see http://developer.yahoo.com/yui/3/autocomplete/#config)
               minQueryLength: 2,
               maxResults: 50,
               resultTextLocator: 'label',
               source:
                [{label: "Massachusets", value: "MA"},
                {label: "state2", value: 2},
                {label: "state3", value:3}]

            }
         });

      Y.Node.create("").appendTo('#container1').on( 'click', function() {
            alert( field.getValue() );
         });

         field.on("updated", function(value) {
           Y.one('#container1').append("
Updated at "+(new Date())+" with value '"+value+"'
"); });

Delicious Autocompleter

Uses the del.icio.us json API to search within posts


         // Example 2: Delicious autocompleter

         // Delicious DataSource using a JSFunction
         // Delicious.posts is set by the http://feeds.delicious.com/v2/json/neyric?count=50 script included in the page

         var deliciousAC = new Y.inputEx.AutoComplete({

            label: 'Search my delicious bookmarks',
            description: 'Try "javascript" or "rails"',
            parentEl: 'container2', 
            name: 'chosen_url',

            // Format the hidden value (value returned by the form)
            returnValue: function(post) {
               return post.u; // return post URL
            },
            // Autocompleter options
            autoComp: {
               source: 'http://feeds.delicious.com/v2/json/neyric?count=50&callback={callback}',
               forceSelection: true,
               minQueryLength: 2,
               maxResultsDisplayed: 50,
               resultFilters: 'subWordMatch',
               resultHighlighter: 'subWordMatch',
               resultTextLocator: 'd'
            }
         });

         Y.Node.create("").appendTo('#container2').on('click', function() {
            alert( deliciousAC.getValue() );
         });