無法使用Knockout JS從jquery自動完成中選擇/綁定項目

Question

在我終於可以添加和從列表中刪除項目（see fiddle）後，我繼續實施jQuery Autocomplete。

看過Rune's example和Rene's example之後，我可以觸發自動完成。但是，當我選擇一個項目時，這些值不會添加到我的隱藏輸入和我的搜索框中。

我目前的解決方案遵循符文的例子，但我可以簡單地解釋它，並且一旦我能夠綁定選定的項目，就可以按照Rene的例子。

所以我的問題是：如何綁定選定的項目？ I've created a Fiddle進行測試。

PS。將搜索數據放入數組（而不是從數據庫中獲取）時，我在小提琴中遇到問題。但那不是我的主要問題。

下面是代碼的有關自動完成的部分：

我的HTML：

<input type="hidden" value="" data-bind="value: item_id" /> 
<input class="form-control" type="search" data-bind="value: item_name, autoComplete: items" />  
... 
<ul class="list-group" data-bind="template: { name: 'item-template', data: $root.items}"> 
... 
</ul> 

我的JS;

// Retrieved from DB 
var search_data = [ 
    {"id":"7186","name":"Bose"}, 
    {"id":"1069","name":"BOSS Black"}, 
    {"id":"1070","name":"BOSS Green"}, 
    {"id":"1071","name":"BOSS Hugo Boss"}, 
    {"id":"1072","name":"BOSS Orange"}, 
    {"id":"1074","name":"Boston Brothers"}, 
    {"id":"7678","name":"Bosweel"} 
]; 

ko.bindingHandlers.autoComplete = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var selectedObservableArrayInViewModel = valueAccessor(); 
     var self = bindingContext; 
     self.item_id = ko.observable(); 
     self.item_name = ko.observable();  

     $(element).autocomplete({ 
      minLength: 2, 
      source: function (request, response) { 
       $.ajax({ 
        source: search_data, 
        data: { term: request.term }, 
        type: "POST", 
        dataType: "json", 
        success: function (data) { 
         response(data); 
        } 
       }); 
      }, 
      select: function(e, ui){ 
       var item = ui.item; 
       self.item_name = ko.observable(item.name); 
       self.item_id = ko.observable(item.id); 
      } 
     }).data("uiAutocomplete")._renderItem = function(ul, item) { 
      return jQuery("<li></li>") 
      .data("ui-autocomplete", item) 
      .append("<a>"+ item.name + "</a>") 
      .appendTo(ul); 
     } 

    } 
}; 

Answer 1

我不知道我理解你的問題，所以我不確定這是否回答。

首先，您需要更換這個

var self = bindingContext; 

有了這個

var self = viewModel; 

然後，在你選擇的功能，不重新創建你的觀測，更新它們，然後打電話給你的addItem功能：

select: function(e, ui){ 
      var item = ui.item; 
      self.item_name(item.name); 
      self.item_id(item.id); 
      self.addItem(); 
     } 

更新fiddle（我刪除了你的Ajax調用顯示未經過濾的所有項目，只是爲了演示 - Ajax調用是失敗）

編輯：

在前面的小提琴，輸入被選擇後清零的項目。

將return false;加到select函數的末尾以避免這種情況。

新fiddle