jquery autocomplete.跟踪值而不是标签

jquery autocomplete. tracking values instead of labels

本文关键字：标签 autocomplete 跟踪 jquery      更新时间：2023-09-26

我有一个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 );
    };

有点不愿意发布这个，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();
        }
});

我倾向于创建另一个以指向匹配值的标签为键的数组，并从自动完成的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(','));
});
任何与

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

相关文章：