Knockout and jQuery autocomplete

jquery, jquery-templates, jquery-ui, knockout.js

Solution

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

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>

Problem

Knockout value binding doesn't work with jquery autocomplte. How to get it working? I have a template: ``` <input type="text" class="autocomplete" data-bind="value: viewModelObservableValue" name="MyValue" /> ``` After template rendering I am applying jQuery autocomplete on an input. Binding doesn't work. See my jsfiddle. It works only if `ko.applyBindings(viewModel)` goes after `$(..).autocomplete(..);`

Original source