JSFiddle - React, Tailwind, and code Playground
HTML
<label for="textarea_mesaj_colaborare">Tags:</label>
<input id="textarea_mesaj_colaborare" size="50">
JavaScript
$(function () {
var availableTags = [
{value: 1, label: "@ActionScript" },
{value: 2, label: "@AppleScript" },
{value: 3, label: "@Asp" },
{value: 4, label: "@BASIC" },
{value: 5, label: "@C" } ];
function split(val) {
return val.split(/\s/);
}
function extractLast(term) {
return split(term).pop();
}
$("#textarea_mesaj_colaborare").autocomplete({
source: function (request, response) {
// delegate back to autocomplete, but extract the last term
response($.ui.autocomplete.filter(
availableTags, 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.label);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(" ");
return false;
}
});
});