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(..);
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With