Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Knockout and jQuery autocomplete

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

like image 386
Andrei Avatar asked Jul 16 '13 12:07

Andrei


1 Answers

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>
like image 196
Rene Pot Avatar answered Nov 03 '22 00:11

Rene Pot