使用Knockout + Typeahead自定義綁定更新文本框中的值

Question

我正在使用敲除+提前輸入應用程序，它將顯示輸入字符的建議列表與列表匹配。

一切正常。 唯一的問題是，當我從列表中選擇項目時，它將存儲整個對象。

我只想將名稱存儲在第一個文本框中，並將其存儲在第二個文本框中。

我不知道該怎么做？

可以使用訂閱嗎？ 將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 。

我也曾在早上問過問題，但是我沒有得到答案，所以我通過學習教程編寫自己的代碼，但現在我被困在這里。

關於這種情況的任何建議？

Answer 1

臨時鍛煉有某些限制，例如Bootstrap Typeahead的淘汰賽擴展。 我以前在項目中使用過它，但是它帶來了很多限制，例如對模板的自定義控制，對所選對象屬性和所選對象值的定制控制。 因此，我轉到了基於JQuery-UI自動完成功能的插件jqAuto 。

此插件具有廣泛的自定義范圍，並且比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