Question

I’m having a problem binding the jQueryUI combobox value to a computed observable in my KnockoutJS ViewModel. I found a couple of similar questions like “autocomplete-combobox-with-knockout-js-template-jquery” and “knockoutjs-jquery-combobox-binding” but neither resolve my issue.

I think this all resolves from the fact that the jQueryUI combobox doesn’t fire a change event when it updates the underlying select.

I made an example here…http://jsfiddle.net/farina/hLfWa/

Answer 1

The main key is hooking into the select event of the autocomplete widget that is created as part of the combobox.

Something like:

$("#combobox").next("input").bind( "autocompleteselect", function(event, ui) {
    $("#combobox").val(ui.item.value).change();
});

When a value is selected it would change the value of the original select and fire the change event, which is picked up by the value binding.

Even better though would be to use a custom binding that would do this all for you. Something like:

ko.bindingHandlers.combobox = {
    init: function(element, valueAccessor) {
        var observable = valueAccessor();

        //initialize combobox    
        $(element).combobox();

        //when newly create input changes, then update model
        $(element).next("input").bind("autocompleteselect autocompletechange", function(event, ui) {
            observable(ui.item ? ui.item.value : "");
        });


    },
    update: function(element, valueAccessor) {
        //update the element's value, when the model changes
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).next("input").val(value);   
    }        
};

Here is a sample: http://jsfiddle.net/rniemeyer/6jWvZ/

The sample includes both a combobox and a normal select, so you can see setting the value from the model (via the second select) or from the combobox.