JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<div class="demo">
    
    <div class="ui-widget">
        <label for="tags">Tag programming languages: </label>
        <input id="tags" size="50" />
    </div>
    
</div><!-- End demo -->



<div class="demo-description">
    <p>Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.</p>
    <p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p>
</div><!-- End demo-description -->

JavaScript

var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
    ];

function split(val) {
    return val.split(/,\s*/);
}

function extractLast(term) {
    return split(term).pop();
}

function extractFirst(term) {
    var myarray;
    myarray = split(term);
    myarray.pop();
    //alert(myarray.join("|"));
    return myarray.join("|");
}

function filter(array, term) {
    if (term.length == 0) {
        return array;
    }
    var matcher = new RegExp(term, "i");
    return $.grep(array, function(value) {
        return matcher.test(value.label || value.value || value);
    }, true);
}

$("#tags")
// don't navigate away from the field on tab when selecting an item
.bind("keydown", function(event) {
    if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
        event.preventDefault();
    }
}).autocomplete({
    minLength: 0,
    source: function(request, response) {
        // delegate back to autocomplete, but extract the last term
        response(
            $.ui.autocomplete.filter(
                filter(availableTags, extractFirst(request.term)), extractLast(request.term)
            )
        );
    },
    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;
    }
});