无法使用 Knockout JS 从 jquery 自动完成中选择/绑定项目 [英] Not able to select / bind item from jquery autocomplete using Knockout JS

问题描述

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

After I finally was able to add and remove items from a list (see fiddle), I moved on to implement jQuery Autocomplete.

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

After looking at Rune's example and Rene's example, I am able to trigger Autocomplete. But when I select an item, the values are not added to my hidden input and my search box.

我当前的解决方案遵循 Rune 的示例，但一旦我能够绑定所选项目，我可能会对其进行简化并遵循 Rene 的示例.

My current solution follows Rune's example, but I might simplyfy it and follow Rene's example once I'm able to bind the selected item.

所以我的问题是:如何绑定所选项目?我创建了一个 Fiddle 进行测试.

So my question is: How can I bind the selected items? I've created a Fiddle to test.

附注.将搜索数据放入数组(而不是从数据库获取)时，我在 Fiddle 中遇到了问题.但这不是我的主要问题.

以下是有关自动完成的代码部分:

Here is the part of the code regarding Autocomplete:

我的 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 );
        }

    }
};

推荐答案

我不确定我是否理解你的问题，所以我不确定这是否能回答它.

I am not sure I understand your question, so I am not sure this answers it.

首先，你需要替换这个

var self = bindingContext;

有了这个

var self = viewModel;

然后，在您的 select 函数中，不要重新创建您的 observables，更新它们然后调用您的 addItem 函数:

Then, in your select function, don't re-create your observables, update them and then call your addItem function:

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

更新 fiddle(我删除了您的 ajax 调用以显示所有项目而不进行过滤, 仅用于演示 -- ajax 调用失败)

Updated fiddle (I removed your ajax call to show all items without filtering, just for the demo -- ajax call was failing)

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

In the previous fiddle, the input is cleared after the selection of an item.

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

Add return false; to the end of the select function to avoid that.

新fiddle

这篇关于无法使用 Knockout JS 从 jquery 自动完成中选择/绑定项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！