输入文本字段，在 jquery 中用逗号分隔答案

【问题标题】：Input text field, separate by comma in jquery输入文本字段，在 jquery 中用逗号分隔
【发布时间】：2011-04-03 11:38:14
【问题描述】：

我尝试创建输入文本字段以手动编写文本或从列表中选择（通过输入）。但我的解决方案并不完美。当我手动输入和编写时，它就起作用了。不起作用，当我使用向上/向下箭头在字段中显示时。如何做到这一点？

$(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 ($hlight.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() + ', ');
        }
    });

【问题讨论】：

你能发布一个现场演示at JS Fiddle，or JS Bin吗？

标签： jquery input key

【解决方案1】：

我创建了一些代码，例如自动完成/建议插件：

$(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);
    });

一切正常...但是当我使用箭头（向下或向上）并从列表中选择时，复制到输入和列表中的单词只留下这个单词。我想在列表中滚动，但仍然显示所有建议词

【讨论】：