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

Question

我有一个jquery自动填充字段，我想在同一个输入字段中添加多个值。在我看到的例子中，http://jqueryui.com/demos/autocomplete/#multiple的值和标签是一样的，所以事情在选择事件中可以正常工作。然而，就我而言，当用户选择一个名称时，我希望输入框显示标签，但我想在提交表单时发布这些值。为了解决这个问题，我在表单中添加了一个隐藏字段，并且有一个单独的数组来获取值，但是我的问题是当用户退出该值时。它仍然在我的阵列。任何想法如何解决这个问题？或者更好的解决方案？

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条目并与该索引的内容进行比较（hash ）。

如：（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(',')); 
}); 

凡是不符合事先自动完成的值将被丢弃。