Need help creating a auto-suggest textbox for searching

/* Common */
var KEY_BACKSPACE = 8;
var KEY_ENTER = 13;
var KEY_ESCAPE    = 27;
var KEY_RANGE_MIN = 48;
var KEY_RANGE_MAX = 90;
var KEY_ARROW_UP = 38;
var KEY_ARROW_DOWN = 40;

var __data_cache = new Array();
var __item_selected_object = null;

/*
 * AJAX Initialization
 */
var ajaxHandler  = new JS_AjaxHandler();
var isProcessing = false;

ajaxHandler.initAjax();

var readyStateChange = function()
{
        if ( ajaxHandler.checkState() )
        {
                processData( ajaxHandler.getResponse() );
        }
}
        
ajaxHandler.setReadyStateChange( readyStateChange );

/*
 * Processing Functions
 */
function processKeyUp( e )
{
        if ( e.keyCode == KEY_ENTER )
                return processEnter();

        if ( e.keyCode == KEY_ARROW_UP )
                return processArrowKeyUp();

        if ( e.keyCode == KEY_ARROW_DOWN )
                return processArrowKeyDown();

        if ( e.keyCode == KEY_ESCAPE )
                return processData( null );

        if ( ( e.keyCode < KEY_RANGE_MIN || e.keyCode > KEY_RANGE_MAX ) && ( e.keyCode != KEY_BACKSPACE ) )
                return;

        if ( isProcessing )
                return;

        var textInput = document.getElementById( 'username' );

        if ( textInput.value.length < 3 )
                return processData( null );

        isProcessing = true;
        ajaxHandler.sendRequest( "httpRequest.php?search=" +textInput.value, "GET", null, true );
        isProcessing = false;
}

function processEnter()
{
        if ( __item_selected_object != null )
        {
                var textInput = document.getElementById( 'username' );
                textInput.value = __item_selected_object.text;

                processData(null);
        }
}

function processArrowKeyUp()
{
        var autocompleteElement = document.getElementById( 'autocomplete' );
        
        if ( autocompleteElement.style.display != "block" )
                return;

        if ( __data_cache != null && __data_cache.length > 0 )
        {
                if ( __item_selected_object == null || ( __item_selected_object.index - 1 ) < 0 )
                        return selectItem( __data_cache[ __data_cache.length - 1 ], __item_selected_object );

                selectItem( __data_cache[ __item_selected_object.index - 1 ], __item_selected_object );
        }
}

function processArrowKeyDown()
{
        var autocompleteElement = document.getElementById( 'autocomplete' );
        
        if ( autocompleteElement.style.display != "block" )
                return;

        if ( __data_cache != null && __data_cache.length > 0 )
        {
                if ( __item_selected_object == null || (__item_selected_object.index + 1 ) > __data_cache.length - 1 )
                        return selectItem( __data_cache[0], __item_selected_object );

                selectItem( __data_cache[ __item_selected_object.index + 1 ], __item_selected_object );
        }
}

function selectItem( item, previous )
{
        var element = null;

        if ( previous != null )
        {
                element = document.getElementById( previous.id );
                element.className = "item";
        }

        if ( item != null )
        {
                element = document.getElementById( item.id );
                element.className = "item selected";
        }

        __item_selected_object = item;
}

function processData( data )
{
        var autocompleteElement = document.getElementById( 'autocomplete' );
        autocompleteElement.innerHTML = "";

        __data_cache = new Array();
        __item_selected_object = null;

        if ( !autocompleteElement )
                return;

        if ( !data || data == "" )
        {
                autocompleteElement.style.display = "none";
                return;
        }

        /* Eval the JSON */
        var dataObject = null;
        eval( "dataObject = " +data );

        if ( !dataObject )
                return;

        for ( var i = 0; i < dataObject.length; ++i )
        {
                __data_cache[i] = { "index" : i, "id" : "item-id-" +i, "text" : dataObject[i] };
                autocompleteElement.innerHTML += getItemHtml( dataObject[i], "item-id-" +i );
        }               

        autocompleteElement.style.display = "block";          
}



function getItemHtml( text, id )
{
        return "<div class='item' id='" +id+ "'>" +text+ "</div>";
}

     #autocomplete .item:hover,
        #autocomplete .item.selected {
                background-color: #F7F7F7;
        }