Input text field, separate by comma in jquery

I try create input text field for write text manualy or select (by enter) from list. But my solution doens't work perfect. It's work when I enter and write manualy. Doesn't work, when I usign arrows up/down to display in field. How to do this?

$(document).keyup(function(e){
        var $hlight = $('li.hlight'), $el = $('li');

        if (e.keyCode == 40) {
            $hlight.removeClass('hlight').next().addClass('hlight');

            if ($hlight.next().length == 0) {
                $el.eq(0).addClass('hlight')
            }

            $('input[type=text]').val($('input[type=text]').val() + ($('li.hlight').text()));

        } else if (e.keyCode === 38) {
            $hlight.removeClass('hlight').prev().addClass('hlight');

            if ($hlig开发者_开发问答ht.prev().length == 0) {
                $el.eq(-1).addClass('hlight')
            }

            $('input[type=text]').val($('input[type=text]').val() + ($('li.hlight').text()));
        }           

        if (e.keyCode == 13) {
            //alert('enter');
            $('input[type=text]').val($('input[type=text]').val() + ', ');
        }
    });

---

I create some code like autocomplete/suggest plugins:

$(document).keydown(function(e){ //klawisz
        $('#search').val($('#search').val().replace(/[^a-z]/, '')); 

        $.post('rpc.php', {queryString: ""+$('#search').val()+""}, function(data) {
            if (data.length > 0) {                  
                $('#suggest').show().html(data);
            }
        });
    });

    var arr = new Array();

    $(document).keyup(function(e){ // strzalka  
        //alert('strzałka');

        var $hlight = $('#suggest li.hlight'), $el = $('#suggest li');

        if (e.keyCode == 40) {
            $hlight.removeClass('hlight').next().addClass('hlight');

            if ($hlight.next().length == 0) {
                $el.eq(0).addClass('hlight')
            }

            $('#search').val($('li.hlight').text());

        } else if (e.keyCode === 38) {
            $hlight.removeClass('hlight').prev().addClass('hlight');

            if ($hlight.prev().length == 0) {
                $el.eq(-1).addClass('hlight');
            }

            $('#search]').val($('li.hlight').text());
        }

        if ((e.keyCode == 13 || e.keyCode == 188) && $('#search').val().length > 0) {
            if (arr.indexOf($('#search').val()) === -1) {                   
                $('#search').val($('#search').val().replace(/\,/i, '')); 

                arr.push($('#search').val());
            }               

            $('#search').val('');
            $('#suggest').hide();

        }

        $('#tags').html(''+arr);
    });

all works fine... but when i use arrows (down or up) and select from list, the word copy to input and in list leave only this one word. I want rolling on list, but show still all suggestion words