Knockout and jQuery autocomplete

Question

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(..);

Answer 1

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>