jQuery UI - 将所选项附加到输入

时间:2014-02-22 14:24:48

标签: jquery jquery-ui autocomplete

我正在使用带有自动填充的jQuery UI来为邮件收件人建议用户名。但由于消息可以发送给许多收件人,因此我不希望在选择元素后自动完成清除输入。我通过select:操作尝试了这个,但它不能像我希望它一样工作。添加多个收件人后,收件人字段应如下所示:

Username1, Username2, Username3

这是我的代码:

$( "#message_recipient" ).autocomplete({
    source: function( request, response ) {
        if($('#message_recipient').val().indexOf(",") != -1){
            var pieces = $.trim($('#message_recipient').val()).split(/[\s,]+/);
            var last_piece = $.trim(pieces[pieces.length-1]);
        } else {
            var last_piece = $.trim($('#message_recipient').val());
        }

        if(last_piece!=""){
            $.ajax({
                url: baseurl+"users/search_for_user",
                dataType: "json",
                type: "POST",
                data: {
                    user_name: last_piece
                },
                success: function( data ) {
                    response( $.map( data.result, function( item ) {
                        return {
                            label: item.user_name,
                            value: item.user_name
                        }
                    }));
                }
            });
        }
    },
    minLength: 2,
    select: function( event, ui ) {
        $('#message_recipient').val($('#message_recipient').val()+ui.item.label+", ");
    },
    open: function() {

    },
    close: function() {

    }
});

1 个答案:

答案 0 :(得分:0)

您可以使用Tag-It!库。在那里,您可以看到基础输入字段实际上如何包含所需的逗号。对于该情况,您不需要具有其他逻辑。 在该页面上查看“ 单输入字段 ”。

只需添加库并开始使用它。