JSFiddle - React, Tailwind, and code Playground

by Yashpreet Singh

HTML

<textarea class="searchBox" rows="10" cols="20"></textarea>

JavaScript

var triggered = false; // By default trigger is off
var trigger = "#"; // Defining the trigger

$(".searchBox").autocomplete({
    source: [ // defining the source
        "A",
        "Apple",
        "S",
        "D",
        "q","include"],
    search: function () { // before search, if not triggerred, don't search 
        if (!triggered) {
            return false;
        }
    },
    select: function (event, ui) { // invokes the data source, search starts
        var text = this.value;
        var pos = text.lastIndexOf(trigger);
        this.value = text.substring(0, pos + trigger.length) + ui.item.value;
        triggered = false;
        return false;
    },
    focus: function (event, ui) {
        return false;
    },
    minLength: 0 // minimum length of 0 require to invoke search 
});

$('.searchBox').keyup(function (e) {

    if (e.keyCode == 38 || e.keyCode == 40) {
        return;
    }

    var text = this.value;
    var len = text.length;
    var last;
    var query;
    var index;

    if (triggered) {
        index = text.lastIndexOf(trigger);
        query = text.substring(index + trigger.length);
        $(this).autocomplete("search", query);
    } else if (len >= trigger.length) {
        last = text.substring(len - trigger.length);
        triggered = (last === trigger);
    }
});