javascript - 使用Knockout + Typeahead自定义绑定(bind)更新文本框中的值

我正在使用敲除+提前输入应用程序，它将显示输入字符的建议列表与列表匹配。

一切正常。
唯一的问题是，当我从列表中选择项目时，它将存储整个对象。

我只想将名称存储在第一个文本框中，并将其存储在第二个文本框中。

我不知道该怎么做？

可以使用订阅吗？
将subscribe放在第一个文本框中，它将获取整个对象，然后将处理该对象，然后将值存储在相关文本框中。

HTML：

<input type="text" class="form-control" data-bind="typeahead: data, dataSource: categories"/> *
<input type="text" class="form-control" data-bind="value: item"/>

Java脚本：

var ViewModel = function () {
    var self = this;

    self.categories = [
           { name: 'Fruit', items: 'abc' },
            { name: 'Vegetables', items: 'xyz' }
        ];
    self.data = ko.observable();
    self.item = ko.observable();
};
var viewModel = new ViewModel();

ko.bindingHandlers.typeahead = {
    init: function (element, valueAccessor, allBindingsAccessor) {

        var $e = $(element);
        var accessor = valueAccessor();
        var source = allBindingsAccessor().dataSource || [];

        var names = new Bloodhound({
            datumTokenizer: function (d) {
                return Bloodhound.tokenizers.whitespace(d.name);
            },
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            local: source
        });
        names.initialize();
        var substringMatcher = function() {
            return function findMatches(q, cb) {
                var matches, substrRegex;
                substrRegex = new RegExp(q, 'i');
                $.each(source, function(i, p) {
                    if (substrRegex.test(p.name)) {
                        matches.push({ value: p });
                    }
                });
                console.dir(matches);
                cb(matches);
            };
        };
        $e.typeahead({
                hint: true,
                highlight: true,
                minLength: 1
            },
            {
                name: 'name',
                displayKey: 'name',
                source: names.ttAdapter()
            }).on('typeahead:selected', function (el, datum) {
                console.dir(datum);
                accessor(datum);
            }).on('typeahead:autocompleted', function (el, datum) {
                console.dir(datum);
                console.log(accessor);
            });
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        console.log(value);
        $(element).val(ko.utils.unwrapObservable(valueAccessor()));
    }
};
ko.applyBindings(viewModel);

这是它的jsfiddle。

我也曾在早上问过问题，但是我没有得到答案，所以我通过学习教程编写自己的代码，但现在我被困在这里。

关于这种情况的任何建议？

最佳答案

临时锻炼有某些限制，例如Bootstrap Typeahead的淘汰赛扩展。我以前在项目中使用过它，但是它带来了很多限制，例如对模板的自定义控制，对所选对象属性和所选对象值的定制控制。因此，我转到了基于jqAuto自动完成功能的插件JQuery-UI。

此插件具有广泛的自定义范围，并且比typeahead更快。我在jqAuto代码中复制了您的代码，它比预先引导引导程序更快，更干净。

的JavaScript

var ViewModel = function() {
    self.categories = [
           { name: 'Fruit', items: 'abc' },
            { name: 'Vegetables', items: 'xyz' }
        ];

    self.data = ko.observable("");
    self.item = ko.observable();

};

ko.applyBindings(new ViewModel());

的HTML

<input data-bind="jqAuto: { source: categories, value: data, dataValue : data, inputProp: 'name', valueProp: 'name', labelProp: 'name'  }" />

您可以在粒度级别上控制标签属性，输入属性以及值属性。

小提琴演示：http://jsfiddle.net/rahulrulez/uGGb8/4/

jqAuto插件的详细文档在此处给出：https://github.com/rniemeyer/knockout-jqAutocomplete