Connect knockout and jQueryUI autocomplete

Question

I have jQueryUI autocomplete that is retrieved from the list of clients and connected based on the [input data-role = "customer-search"] selector. As soon as a client is selected, I make an AJAX call to get complete information about the client. I work great in this part. The problem is that it's hard for me to figure out how to include a knockout in this. My ideal situation is a custom binding, such as "onSelect: customerSelected", which will accept the selected JSON client and integrate it into the general model, which will then lead to updating several fields on the page with bings, such as model.Customer.Address, model .Customer.Type.

The place that I encounter with the head is the connection point after I received the JSON client from an AJAX call, how to send it to the customerSelected method on the viewmodel bound to the same input. JQuery autocomplete.

Answer 1

Here is a simplified version of the binding handler that my team wrote to handle autocomplete. When an item is selected, the item is inserted into the observed array in the view model. It is connected as follows:

<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); } } }); } }; 

Hope this looks like what you are looking for. If you need something clarified, let me know.

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

Answer 2

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"/>