A Simple auto-complete Widget

Demonstration

Some useful keyboard shortcuts:

Page Setup

Javascript

Add the following javascript and css tags into your page.
    <script type="text/javascript" src="../../build/yui/yui-min.js"></script>
    <script type="text/javascript" src="../../build/lazr/lazr-meta.js"></script>
  

The only existing markup required for the autocomplete widget is an input box.

      <input id="input-box" type="text" value="" />
    

Widget Setup

The AutoComplete widget requires two ATTRs on creation: a node id and an array containing data.
    var LAZR_YUI_CONFIG = {
        filter: "min",
        base: "../../build/",
        modules: LAZR_MODULES,
    };
    YUI(LAZR_YUI_CONFIG).use("lazr.autocomplete", function(Y) {
        var autocomplete = new Y.lazr.AutoComplete({
            input: '#input-box',
            data: ['Mike', 'Fred', 'Barney']
        });
        autocomplete.render();
    });