JSFiddle - React, Tailwind, and code Playground

by manoj jasti

HTML

<input type="text" id="user-search" data-bind="autocomplete: { source: getUsers, select: selectUser }"/>

JavaScript

ko.bindingHandlers.ko_autocomplete = {
    init: function(element, params) {
        $(element).autocomplete(params());
    }
};

var autocomplete = autocomplete||{};
(function(autocomplete) {

    var ViewModel = (function() {

        function ViewModel() {
            this.selectUser = this.selectUser.bind(this);
        }

        ViewModel.prototype.getUsers = function(request, response) {
            var text = request.term;
            $.ajax({
                            type: "POST",
                            url:'/PositionManager/GetUser/',
                            data: { Term: request },
                            dataType: 'json',
                            success: function (data) {
//todo success handling
                            },
                            error: function () {
                            //todo error handling
                            }
                        });
            
        };

        ViewModel.prototype.selectUser = function(event, ui) {
            //todo logic after selecting
        };
        return ViewModel;

    })();
    autocomplete.ViewModel = ViewModel;
    })(autocomplete));

ko.applyBindings(new autocomplete.ViewModel());