淘汰赛和 jQuery 自动完成答案

【问题标题】：Knockout and jQuery autocomplete淘汰赛和 jQuery 自动完成
【发布时间】：2013-07-14 14:30:37
【问题描述】：

敲除值绑定不适用于 jquery 自动完成。如何让它工作？

我有一个模板：

<input 
   type="text" 
   class="autocomplete" 
   data-bind="value: viewModelObservableValue"
   name="MyValue" />

在模板渲染之后，我在输入上应用 jQuery 自动完成功能。绑定不起作用。见我的jsfiddle。

仅当ko.applyBindings(viewModel) 追随$(..).autocomplete(..); 时才有效

【问题讨论】：

好的，给你一个答案。有趣的问题

标签： jquery jquery-ui knockout.js jquery-templates

【解决方案1】：

看起来 jQuery 自动完成功能劫持了 change 事件。这就是为什么它不起作用。

要解决此问题，您必须将 valueUpdate 属性设置为 blur。当然，这不会在选择项目后触发，您必须先进行模糊处理。

$(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Scheme"
    ];
    $(".autocomplete").autocomplete({
      source: availableTags
    });
 });

var viewModel = {
    myValue: ko.observable()
};

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

<input type="text" class="autocomplete" data-bind="value: myValue, valueUpdate:'blur' " />

<div data-bind="text: myValue"></div>

【讨论】：