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

凡是不符合事先自動完成的值將被丟棄。