淘汰赛和jQuery自动完成 [英] Knockout and jQuery autocomplete

问题描述

敲除值绑定不适用于jquery autocomplte.如何使其正常工作?

Knockout value binding doesn't work with jquery autocomplte. How to get it working?

我有一个模板:

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

模板渲染后，我在输入上应用了jQuery自动完成功能.绑定无效.参见我的 jsfiddle .

After template rendering I am applying jQuery autocomplete on an input. Binding doesn't work. See my jsfiddle.

仅当ko.applyBindings(viewModel)排在$(..).autocomplete(..);

推荐答案

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

It looks like jQuery autocomplete hijacked the change event. Thats why it doesn't work.

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

To fix this, you'll have to set the valueUpdate property to blur. Of course, this won't trigger after selecting the item, you'll have to blur first.

$(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>

这篇关于淘汰赛和jQuery自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！