JSFiddle - React, Tailwind, and code Playground

by Noel Calonia

HTML

<body>
    <div>
        <p>
		x-editable sample: <br>
            <a href="#" id="country" data-type="select2" data-pk="1" data-value="ru" data-url="/post" data-title="Select country">SELECT COUNTRY</a>
        </p>
    </div>
</body>

JavaScript

$('#country').editable({
    source: [{
        id: 'gb',
        text: 'Great Britain'
    }, {
        id: 'us',
        text: 'United States'
    }, {
        id: 'ru',
        text: 'Russia'
    }],
    select2: {
        multiple: true
    }
});
//remote source (simple)
$('#country').editable({
    source: '/getCountries',
    select2: {
        placeholder: 'Select Country',
        minimumInputLength: 1
    }
});
//remote source (advanced)
$('#country').editable({
    select2: {
        placeholder: 'Select Country',
        allowClear: true,
        minimumInputLength: 3,
        id: function(item) {
            return item.CountryId;
        },
        ajax: {
            url: '/getCountries',
            dataType: 'json',
            data: function(term, page) {
                return {
                    query: term
                };
            },
            results: function(data, page) {
                return {
                    results: data
                };
            }
        },
        formatResult: function(item) {
            return item.CountryName;
        },
        formatSelection: function(item) {
            return item.CountryName;
        },
        initSelection: function(element, callback) {
            return $.get('/getCountryById', {
                query: element.val()
            }, function(data) {
                callback(data);
            });
        }
    }
});