Выбор шрифта Twitter Bootstrap, не связанный KnockoutJS

Одним из решений является изменение вашей функции updater, где вам нужно получить наблюдаемый объект, используемый в привязке value, и обновить его с помощью параметра функции:

'updater': function(item) {
    allBindings.value(item);
    return item;
}

Демонстрация JSFiddle.

Если вы не являетесь автором привязки, вы можете использовать параметр updater, чтобы указать функцию updater.

data-bind="typeahead:availableProducts, 
           updater: function(item) { productName(item); return item; }"

Поскольку updater должен возвращать выбранный элемент, синтаксис этого не так хорош.

Демонстрация JSFiddle.

Я предпочитаю, чтобы мой список предложений автозаполнения был полностью отделен от Knockout. Я хочу, чтобы Knockout знал только тогда, когда пользователь действительно ввел значение.

Это ближе к методике user2576666, поскольку использует Typeahead. настраиваемые события для принудительного обновления модели Knockout при выборе или автозаполнении. Однако для этого не требуется настраиваемая привязка с опережением ввода и не требуется, чтобы значения сохранялись в Knockout ViewModel. Это открывает возможности для более настраиваемого завершения в будущем (например, с использованием Bloodhound), что было бы излишне громоздко, если бы мы попытались сохранить его в модели Knockout. Моя ViewModel определенно не является подходящим местом для хранения параметров автозаполнения для моего варианта использования (и, я бы посоветовал, многих других, особенно если у вас есть потенциально большой список, который требует динамического заполнения). ИМО эту версию также легче понять:

var availableProducts = ['One', 'Two', 'Three'];

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substrRegex;
    matches = [];
    substrRegex = new RegExp(q, 'i');
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        matches.push({ value: str });
      }
    });
    cb(matches);
  };
};


function MyModel(){
    var self = this;
    self.productName = ko.observable();
}

var myModel = new MyModel();

ko.applyBindings(myModel);

var onUpdated = function($e, datum) {
    myModel.productName(datum.value);
};

$(".typeahead")
    .typeahead(
       {hint: true, minLength: 1, highlight: true},
       {displayKey: 'value', source: substringMatcher(availableProducts)})
    .on('typeahead:autocompleted', onUpdated)
    .on('typeahead:selected', onUpdated); // for knockoutJS 

Я, конечно, сохранил это как JSFiddle:

Это средство обновления не сработало для меня, вот что помогло

ko.bindingHandlers.typeahead = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var $element = $(element);
        var allBindings = allBindingsAccessor();
        var typeaheadArr = ko.utils.unwrapObservable(valueAccessor());

        var updateValues = function (val) {
            allBindings.value(val);
        };

        $element.attr("autocomplete", "off")
                .typeahead({
                    'local': typeaheadArr,
                    'minLength': allBindings.minLength,
                    'items': allBindings.items,
                }).on('typeahead:selected', function (el, item) {
                    updateValues(item.value);
                }).on('typeahead:autocompleted', function (el, item) {
                    updateValues(item.value);
                });
    }
};