KnockoutJS JQuery Combobox Binding

Question

I'd like to make a binding for knockout which uses the JQuery Autocomplete Combobox and allows for 2 way binding.

http://jsfiddle.net/rniemeyer/PPsRC/ from this question has gotten a start, but doesn't fully implement the combobox functionality as on the jQuery demo site. (ie. selection highlighting, button styling, button not submitting the form, etc.).

There's no real question posed here. What are you having trouble with, specifically? — Judah Gabriel Himango, Oct 30 '11 at 15:34
Since you haven't clarified what you're asking, I'm closing this as not a real question. — Judah Gabriel Himango, Jan 17 '12 at 15:59

score 3 · Answer 1 · answered Jan 29 '12 at 03:00

3

This is a bit late, but I have a two way autocomplete combo box binding in my Knockout UI library (see Dropdown). Take a look and see if it helps.

Thanks

answered Jan 29 '12 at 03:00

madcapnmckay

15,782
6
61
78

score 3 · Answer 2 · answered Jan 29 '12 at 13:06

I have used http://harvesthq.github.com/chosen/ in my projects. It works perfectly over standard HTML control SELECT. So I have used standard bindings for managing SELECT (options, value, selectionOptions) and additional custom binding chosen to convert standard control to fancy one.

You could checkout usage example: http://jsfiddle.net/romanych/PcXrP/6/

There is code of binding. It is pretty simple

ko.bindingHandlers.chosen = {
    init: function(elemenet, valueAccessor) {
        var chosenOptions = ko.utils.unwrapObservable(valueAccessor());
        $(elemenet).chosen(chosenOptions);
    },
    update: function(elemenet, valueAccessor, allValuesAccessor) {
        // Subscribe to any change of underlying SELECT-element
        ko.utils.unwrapObservable(allValuesAccessor().value);
        ko.utils.unwrapObservable(allValuesAccessor().options);
        ko.utils.unwrapObservable(allValuesAccessor().selectedOptions);
        $(elemenet).trigger("liszt:updated");
    }
};

This binding is great, but how do you use it when you just want to bind to an array of text values without a name/value object? — Brian Vallelunga, May 24 '12 at 14:55
Actually the same. `chosen` binding is just indicator that SELECT should be wrapped by `chosen` plugin. You should use regular `options` binding http://knockoutjs.com/documentation/options-binding.html without `optionsText` and `optionsValue` declarations — Romanych, May 30 '12 at 10:54
I had to replace the knockout reference in the fiddle with a different url to get it to work. I used... http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js — Feckmore, Mar 26 '13 at 13:20

KnockoutJS JQuery Combobox Binding

2 Answers2

Linked