无法使用Knockout JS从jquery自动完成中选择/绑定项目

在我最终能够从列表中添加和删除项目之后（ 参见小提琴 ），我继续实现jQuery自动完成。

在看了Rune的例子和Rene的例子后 ，我能够触发自动完成。 但是当我选择一个项目时，这些值不会添加到我的隐藏输入和我的搜索框中。

我目前的解决方案遵循Rune的例子，但是我可能只是简单地使用它并且在我能够绑定所选项目之后遵循Rene的示例。

所以我的问题是：如何绑定所选项？ 我创造了一个小提琴来测试。

PS。 将搜索数据放入数组（而不是从数据库获取）时，我在小提琴中遇到问题。 但这不是我的主要问题。

以下是有关自动填充的代码部分：

我的HTML：

  ... 
 ...  

我的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( "
" ) .data( "ui-autocomplete", item ) .append( ""+ item.name + "" ) .appendTo( ul ); } } }; 

Answer 1

我不确定我理解你的问题，所以我不确定这是否有答案。

首先，您需要替换它

 var self = bindingContext; 

有了这个

 var self = viewModel; 

然后，在select函数中，不要重新创建observable，更新它们然后调用addItem函数：

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

更新了小提琴 （我删除了你的ajax调用以显示所有项目而不进行过滤，仅用于演示 – ajax调用失败）

编辑：

在前一个小提琴中，输入在选择项目后被清除。

添加return false; 到select函数的末尾以避免这种情况。

新小提琴