Jquery自動完成選定的ID沒有得到保存

Question

我想從jQuery的自動完成中獲取選定的值，出於某種原因我無法獲得ID。我在這裏看到了一個解決方案http://www.codeproject.com/Articles/152558/jQuery-UI-Autocomplete-with-ID，但是我的數據像下面那樣返回我應該如何得到id保存？

我的數據

[{"id":3,"homename":"DCosta"}] 

我的代碼

$("#lastname").autocomplete({ 
    source: function (request, response) { 
    var term = request.term; 
    if (term in cache) { 
     response(cache[term]); 
     return; 
    } 
     $.ajax({ 
     type: 'POST', 
     url: someurl, 
     dataType: 'json', 
     data: { "Name": request.term}, 
     success: function (result) { 
       var Surnames = JSON.parse(result.data); 
       cache[term] = ($.map(Surnames, function (item) { 
       return { 
          label: item.homename, 
          //value: item.id //<== if I do like this the id show in the text box which I do now want 
          value: item.homename //<== this shows correctly but the id is not accessable 
         } 
       })); 
      response(cache[term]); 
     }, 

     error: function (a, b, c) { 
         debugger; 
     } 
     }); 

     }, 
     select: function (event, ui) { 
     self.Surname(ui.item.value); // save selected value 
      console.log(self.Surname()); // shows ID if value: item.id or just the name 

    }, 
      minLength: 2 
}); 

Answer 1

你可以添加一個隱藏字段來存儲您的id（讓我們給它的myhiddenid一個id），並設置自動完成字段值從您的函數返回的標籤。添加return false;將取消事件的默認行爲

默認操作是將文本字段的值替換爲所選項目的值。

var myhiddenid = $("#myhiddenid"); 
var lastname = $("#lastname"); 

lastname.autocomplete({ 
    source: function (request, response) { 
    var term = request.term; 
    if (term in cache) { 
     response(cache[term]); 
     return; 
    } 
     $.ajax({ 
     type: 'POST', 
     url: someurl, 
     dataType: 'json', 
     data: { "Name": request.term}, 
     success: function (result) { 
       var Surnames = JSON.parse(result.data); 
       cache[term] = ($.map(Surnames, function (item) { 
       return { 
          label: item.homename, 
          value: item.id 
         } 
       })); 
      response(cache[term]); 
     }, 

     error: function (a, b, c) { 
         debugger; 
     } 
     }); 

     }, 
     focus: function (event, ui) { 
     lastname.val(ui.item.label); 
     myhiddenid.val(ui.item.value); 
     return false; 

    }, 
     select: function (event, ui) { 
     lastname.val(ui.item.label); 
     myhiddenid.val(ui.item.value); 
     self.Surname(ui.item.value); 
     console.log(self.Surname()); 
     return false;  
    }, 
      minLength: 2 
});