Connect knockout and jQueryUI autocomplete

Question

I have a jQueryUI autocomplete that pulls from a list of customers and is attached based on the selector [input data-role="customer-search"]. Once a customer is selected, I make a AJAX call to get the full customer detail. This part I have working fine. The issue is that I am having trouble figuring out a way to incorporate knockout into this. My ideal situation is a custom binding like "onSelect: customerSelected", which would take in the selected Customer JSON and integrate it into the overall model, which would then cause updates to a bunch of fields on the page with bingings such as model.Customer.Address, model.Customer.Type.

The place I am butting my head against is that connection point after I've gotten the Customer JSON back from the AJAX call, how to send it to the "customerSelected" method on the viewmodel tied to the same input I attached the jQuery autocomplete.

You should post some code, preferably in a fiddle. – Kyeotic Mar 29 '13 at 00:27 — Kyeotic, Mar 29 '13 at 00:27

score 11 · Accepted Answer · edited Mar 11 '14 at 20:26

Here is a simplified version of a bindinghandler my team wrote for handling autocomplete. When an item is selected, the item is inserted into an observable array in the view model. It is bound in the following manner:

<input type="text" data-bind="autoComplete:myObservableArray, source:'myUrl'" />

You can customize what happens when an item is selected in the 'select:' area.

ko.bindingHandlers.autoComplete = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var postUrl = allBindingsAccessor().source; // url to post to is read here
        var selectedObservableArrayInViewModel = valueAccessor();

        $(element).autocomplete({
            minLength: 2,
            autoFocus: true,
            source: function (request, response) {
                 $.ajax({
                    url: postUrl,
                    data: { term: request.term },
                    dataType: "json",
                    type: "POST",
                    success: function (data) {
                        response(data);
                    }
                });
            },
            select: function (event, ui) {
                var selectedItem = ui.item;

                if (!_.any(selectedObservableArrayInViewModel(), function (item) { return item.id == selectedItem.id; })) { //ensure items with the same id cannot be added twice.
                    selectedObservableArrayInViewModel.push(selectedItem);
                }
            }
        });
    }
};

Hopefully, it's something like this that you're looking for. If you need something clarified, let me know.

Note Besides jquery and knockout, this example uses underscore.js ( the _.any() function)

Yeah, this kind of concept mirrors some later thoughts and discussions I had. The initial design had the initiator being the jqueryUI widget which would then try to find the binding. This reverses that with the binding being the initiator and simply owning the widget, which makes things a LOT easier to manage. — Rich, Mar 30 '13 at 03:36
Awesome solution. I changed the select to set the value of the field, which is just ui.item.label if it will help any one. — PCasagrande, Jul 07 '13 at 19:33
gr8 thanks, one thing that is worth mentioning: if you are planning to re-create the viewmodel, use `update` callback instead of `init` — b.b3rn4rd, Nov 13 '13 at 23:54

Andrei · Answer 2 · 2017-06-01T11:15:37.470

valueUpdate: blur

data-bind="value: textbox, valueUpdate: blur" binding fixed the problem for me:

$(function() {
    $(".autocomplete").autocomplete({
        source: [
           "ActionScript",
           "AppleScript",
           "Asp",
           "BASIC",
           "C",
           "C++",
           "Clojure",
           "COBOL",
           "ColdFusion",
           "Scheme"]
    });
 });

var viewModel = {
    textbox: ko.observable()
};

ko.applyBindings(viewModel);

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

<input type="text" class="autocomplete" data-bind="value: textbox, valueUpdate: blur"/>

Connect knockout and jQueryUI autocomplete

2 Answers2

valueUpdate: blur

Linked