JSFiddle - React, Tailwind, and code Playground

by Michael Baas

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.css">

<label for="myinput">Enter 3 Cities</label>
<input  id="myinput" />
<label for="inp2">Dummy control so that we see tab moving away...</label>
<input value"second input" type="text" id="inp2"/>

JavaScript

var input = document.getElementById("myinput");
new Awesomplete(input, {
        tabSelect: true,
        minChars: 1,
        list: ["Frankfurt","Hamburg","Berlin","Braunschweig","Brandenburg","Baasdorf","Schlumpfhausen","Stuttgart","München","Köln"],
        filter: function(text, input) {
            return Awesomplete.FILTER_STARTSWITH(text, input.match(/[^,]*$/)[0]);
        },
        replace: function(text) {
            var before = this.input.value.match(/^.+,\s*|/)[0];
            this.input.value = before + text + " ";
        }    
    });