Jquery Autocomplete Demo

Autocomplete Demo with remote Data-source

by Chitkala More

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
 <textarea class="multiselect-element"></textarea>

JavaScript

var data = [
                   "ActionScript",
                   "AppleScript",
                   "Asp",
                   "BASIC",
                   "C++",
                   "Clojure",
                   "COBOL",
                   "ColdFusion"
            ];
            function split(val) {
    return val.split(/,\s*/);
}
function extractLast(term) {
    return split(term).pop();
}
function bindAutoComplete(ele, options) {
    var text = ele.val();
    text = text == null || text == undefined ? "" : text;
    $(ele).autocomplete(options).data("autocomplete")._renderItem = function (ul, item) {
        var checked = (text.indexOf(item.label + ', ') > -1 ? 'checked' : '');
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append('<a href="javascript:;"><input type="checkbox"' + checked + '/>' + item.label + '</a>')
            .appendTo(ul);
    };
}
            $(function () {
                var $this;
                var multiSelectOptions = {
    minLength: 0,
    source: function (request, response) {
        response($.map(data, function (item) {

            return {
                label: item
            }
        }));
    },
    focus: function () {
        // prevent value inserted on focus
        //$($this).autocomplete("search");
        return false;
    },
    select: function (event, ui) {
        var text = $this.val();
        text = text == null || text == undefined ? "" : text;
        var checked = (text.indexOf(ui.item.value + ', ') > -1 ? 'checked' : '');
        if (checked == 'checked') {
            this.value = this.value.replace(ui.item.value + ', ', '')
        }
        else {
            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 =...