Using JQueryUI combobox() with KnockoutJS


This is something I had a great deal of trouble with, but in the end the solution was simple. Basically when using the combobox() autocomplete drop down in jQueryUI (in prototype at time of writing) along side KnockoutJS I found changing your selection in the drop down list didn’t update the viewModel in knockout as expected. This is because knockoutjs attached itself to the change() event of the drop down, and jqueryUI wasn’t raising this event when it changed the drop down. This is easily fixed by adding an event handler to thre jqueryUI combobox which forces the event to be called when the user selects a new option;

$("select").combobox({
            selected: function(event, ui) { 
                $(ui.item.parentNode).change();
            }
        });

Thanks go out to the “Rob on programming” blog, which helped me get my head around what was going on in the events in combobox.

  1. #1 by Matthew Hall on February 7, 2013 - 17:25

    Thanks Shawson for publishing this tip. You helped me stave off a mental breakdown :)

  2. #2 by shawson on February 8, 2013 - 14:35

    haha for now….

(will not be published)