JSFiddle - React, Tailwind, and code Playground

by telizpablo

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css">
multi values autocomplete: <input type="text" id="keywords" size="50">
<br/><br/>
accent insensitive autocomplete: <input type="text" id="keywords2" size="30">

JavaScript

$(function(){
var keywordz = [
        "Caféteria",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
        ];

//////////////FIRST AUTOCOMPLETE WITHOUT ACCENT CHECK///////////////
    
function split(val) {
        return val.split(/,\s*/);
    }

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

$('#keywords')
.keydown(function(e){
                    if ( e.keyCode === $.ui.keyCode.TAB &&
                    $( this ).data( "autocomplete" ).menu.active ) {
                    e.preventDefault();
                    }
                    if(e.which == 13) { 
                       e.preventDefault(); 
                    }
                
$('#keywords').autocomplete({
            
            minLength: 1,
            autoFocus : true,
            source: function(request, response) {
                // delegate back to autocomplete, but extract the last term
                response($.ui.autocomplete.filter(
                keywordz, 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;
                }
               
 ...