JSFiddle - React, Tailwind, and code Playground

by John VandenBrook

HTML

<input type="text" data-bind="value: Categories, autocomplete_multiselect: 'AutoCompleteDataSourceUrl ItemName ItemValue'" />

JavaScript

ko.bindingHandlers.autocomplete_multiselect = {
        init: function (element, params) {
            var options = params().split(' ');
            $(element).bind("focus", function () {
                $(element).change();
            });
            $(element).autocomplete({ source: function (request, response) {
                $.getJSON(options[0], { q: extractLast(request.term) }, function (data) {
                    response($.map(data, function (item) {
                        return { label: item[options[1]], value: item[options[2]] };
                    }));
                });
            },
                focus: function () {
                    // prevent value inserted on focus
                    return false;
                },
                select: function (event, ui) {
                    var terms = split(this.value);
                    // remove the current input
                    terms.pop();
                    // add the selected item
                    terms.push(ui.item.value);
                    // add placeholder to get the comma-and-space at the end
                    terms.push("");
                    this.value = terms.join(", ");
                    return false;
                }
            })
        .bind("focus", function () {
            $(element).change();
        });
        },
        update: function (element, params) {
        }
    };