Question

我有一个jquery自动完成字段，我想在同一个输入字段中添加多个值。在我看到的示例中，http://jqueryui.com/demos/autocomplete/#multiple值和标签是相同的，因此在select事件中的事情可以正常工作。但是，在我的情况下，当用户选择名称时，我希望输入框显示标签，但我想在提交表单时发布值。为了试图绕过它，我在表单中添加了一个隐藏字段，并且有一个单独的数组来获取值，但我的问题是当用户退出值时。它还在我的阵列中。任何想法如何解决？或者更好的解决方案？

var friend_data = [{"label":"JOhn Doe","value":"12345"},{"label":"Jane Doe","value":"123456"}];

$( "#friends" )
    // don't navigate away from the field on tab when selecting an item
    .bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "autocomplete" ).menu.active ) {
            event.preventDefault();
        }
    }).autocomplete({
        minLength: 0,
        //source: friend_data,
        source: function( request, response ) {
            // delegate back to autocomplete, but extract the last term
            response( $.ui.autocomplete.filter(
                friend_data, extractLast( request.term ) ) );
        },
        delay: 0,
        autofocus: true,
        focus: function(event, ui) {
            return false;
        },
        select: function( event, ui ) {
            var terms = split( this.value );

            // remove the current input
            terms.pop();
            // add the selected item
            terms.push( ui.item.label );
            friend_id_list.push( ui.item.value );
            console.log(friend_id_list);
            // add placeholder to get the comma-and-space at the end
            terms.push( "" );
            this.value = terms.join( ", " );
            console.log(this.value);
            return false;
        }   
    })
    .data( "autocomplete")._renderItem = function( ul, item ) {
        var fb_pic_path = '<img src="http://graph.facebook.com/' + item.value + '/picture?type=square">' ;

        return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + fb_pic_path + item.label + "</a>" )
        .appendTo( ul );
    };

Answer 1

有点不愿意发布这个，b / c我是javascript / jquery的新手，这可能是最好的方法，但如果你和我一样新，并且只是寻找有用的东西，这就是我现在用来保持同步的东西。

$("#friends").keyup(function(event) {    
    var friend_label_count = this.value.split(",").length - 1;
    var friend_value_count = friend_id_list.length;
    if (friend_label_count < friend_value_count) {
        friend_id_list.pop();
        }
});

Answer 2

我倾向于在标签上创建另一个指向匹配值的数组，并从自动完成的select函数中填充它。

我不是通过每个选择填充friend_id_list数据，而是创建要作为提交或模糊的一部分传递回服务器的值列表，方法是拆分#friends条目并进行比较该索引的内容（哈希）。

例如：（NB未经测试）

var selections = {}; //instantiated earlier
var friend_id_list = [];
<snip>
select: ...
        selections[ui.item.label] = ui.item.value;
        ...

$('#friends').blur( function(){
    var entries = $(this).val().split(', *'); // in case space character removed..
    var friend_id_list = [];
    for(entry in entries){
        if(selections[entry]) friend_id_list.push(entry);
    }
    $('#myhiddenfield').val(friend_id_list.join(','));
});

任何与以前自动完成的值不匹配的内容都将被删除。

jquery自动完成。跟踪值而不是标签

2 个答案: