• Register
  • Log In
  • Home
  • Quick Start
    • Configurator
    • Download YUI 3
  • Documentation
    • User Guides
    • Examples
    • API Docs
    • Environments
    • Tutorials
  • Community
    • Gallery
    • Blog
    • Forums
    • YUI Theater
    • Calendar
  • Contribute
    • YUI on GitHub »
    • File a Ticket
    • View Tickets
    • Dashboard
  • Other Projects
    • Shifter »
    • Yogi »
    • YUI 2
    • YUI Doc »
    • YUI Test
    • YUI Website
    • YUI Compressor »
    • YUI Builder »
    • YUI PHP Loader
    • Grid Builder »
    • Skin Builder »
  • YUI
  • >
  • Community
  • >
  • Gallery

Gallery

Modules

  • Home
  • Featured
  • Popular
  • New
  • All

Documentation

  • Yogi Documentation
  • Shifter Documentation
  • Developer Guide
  • Module Setup

Tag Cloud

Context Navigation

    YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

    AutoComplete (gallery-autocomplete) on cdn

    Last Updated: 01/14/10
    + 0 -

    Marc

    YUI Contributor

    See 7 more by this user.

    Created: 01/13/10
    Last CDN Push: 01/27/10
    Build Tag: gallery-2010.01.27-20
    Project: YUI 3
    License: YUI BSD
    YUI Version: 3.0.0
    Free for use.

    An implementation of the AutoComplete pattern. It consists of a node plugin that listens to key events, and a default renderer that uses Widget to display a list of items to the user.

    • Tags:
    • isaacs
    • autocomplete
    • Download
    • Docs
    • Homepage
    • Bugs
    • Source
    • Example
    • Forum
    • History

    Add an autocomplete to the input element with an id of "input", so that it fetches search suggestion results through YQL.

    Code Sample

    <script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
    YUI({
        //Last Gallery Build of this module
        gallery: 'gallery-2010.01.27-20'
    }).use('gallery-autocomplete', 'datasource', function (Y) {
     
        new Y.ACWidget({
            ac : Y.get("#input").plug(Y.Plugin.ACPlugin, {
                queryTemplate : function (q) { return "q=" + encodeURIComponent(
                    "select * from search.suggest where query =\"" +
                    q.replace(/(["\\])/g, '\\$1') +
                    "\" limit 10"
                )},
                dataSource : new Y.DataSource.Get({
                    source : "http://query.yahooapis.com/v1/public/yql?" +
                        "format=json&" +
                        "env=http%3A%2F%2Fdatatables.org%2Falltables.env&",
                    scriptCallbackParam : "callback"
                }).plug({fn : Y.Plugin.DataSourceJSONSchema, cfg : {
                    schema : { resultListLocator : "query.results.Result" }
                }})
            }).ac
        }).render();
     
    });
     

    Forum Posts

    Subject Author Date
    Does Autocomplete combo box supports pagination. Kalpana Thakur 05/11/10
    Re: Does Autocomplete combo box supports pagination. EXTC 05/12/10
    Re: Does Autocomplete combo box supports pagination. Kalpana Thakur 05/12/10
    Re: Does Autocomplete combo box supports pagination. EXTC 05/12/10
    how to use data from an xml data source Swami 05/20/10
    errors in example code Swami 05/21/10
    Re: errors in example code Eike Hirsch 05/31/10
    Suggestion List is invisible Khoa Vo 06/3/10
    Re: Suggestion List is invisible Eike Hirsch 06/3/10
    Re: Suggestion List is invisible Khoa Vo 06/4/10

    © 2006-2013 Yahoo! Inc. All rights reserved.
    All code on this site is licensed under the BSD License unless stated otherwise.
    About This Site · Security Contact Info