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/current/build/yui/yui.js"></script>
    <script type="text/javascript" src="../../build/autocomplete/autocomplete.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 autocomplete = new Y.lazr.AutoComplete({
        input: '#input-box',
        data: ['Mike', 'Fred', 'Barney']
    });
    autocomplete.render();