Question

在我最终能够从列表中添加和删除项目（see fiddle）后，我继续实现jQuery自动完成。

查看Rune's example和Rene's example后，我可以触发自动填充功能。但是当我选择一个项目时，这些值不会添加到我的隐藏输入和搜索框中。

我目前的解决方案遵循Rune的例子，但我可以简单地完成它并按照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;

然后，在你的select函数中，不要重新创建你的observable，更新它们，然后调用你的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

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

1 个答案: