Dropmenu

<div id="area1" class="area">
    <div class="msg">click here</div>
</div>
<script>
    $(function () {
        const div = $('#area1');
        const msg = div.find('.msg');

        div.on('click', (e) => {
            awe.dropmenu({
                dataFunc: () => [{ k: 1, c: 'item 1' }, { k: 2, c: 'item 2' }, { k: 3, c: 'item 3' }],
                select: (item) => msg.html('you clicked ' + item.c),
                autoOpen: { xy: { y: e.clientY, x: e.clientX } }
            });
        });
    });
</script>

<div class="area" id="area2">
    <div class="card">
        <div class="big">a</div>
    </div>
    <div class="card">
        <div class="big">b</div>
    </div>
    <div class="card">
        <div class="big">c</div>
    </div>
    <div class="msg">click here, or on a card</div>
</div>
<script>
    $(function () {
        var div = $('#area2');

        var msg = div.find('.msg');

        div.on('click', function (e) {
            var card = $(e.target).closest('.card');

            awe.dropmenu({
                dataFunc: (getData) => {
                    const items = [{ k: 1, c: 'item 1' }, { k: 2, c: 'item 2' }];

                    if (card.length) {
                        items.push({ k: 'hide', c: 'hide card ' + card.find('.big').html(), i: card.index() });
                    }

                    if (div.find('.card:hidden').length) {
                        items.push({ k: 'all', c: 'show all' });
                    }

                    return items;
                },
                select: select,
                autoOpen: { xy: { y: e.clientY, x: e.clientX } }
            });
        });

        function select(it) {
            msg.html('you clicked ' + it.c);
            if (it.k == 'hide') {
                div.find('.card').eq(it.i).hide();
            } else if (it.k == 'all') {
                div.find('.card').show();
            }
        }
    });
</script>

<textarea id="text1" style="width: 100%" placeholder="try mango onion banana"></textarea>
<script>
    var mealsDataUrl = '<%=Page.Url().Action("GetAllMeals", "Data") %>';

    $(function () {
        let useAt = false;
        let minLen = 1;
        const txt = $('#text1');
        let items = [];
        let word = '';

        // Fetch data
        $.get(mealsDataUrl, (res) => items = res);

        awe.dropmenu({
            dataFunc: () => items,
            positionElm: txt, // position dropdown at elm
            select: (item) => replaceInTexarea(txt[0], `${useAt ? '@' : ''}${item.c}`, word), // action on select
            closeIfNoRes: true, // Close when search has no results
            srctxt: txt, // elm that will trigger the search and open the menu
            getSearchTerm: getSearchTerm, // get search term at Caret without @ symbol            
            showCheckmarkOnMatch: true // shows checkmark when search matches an item
        });

        function getSearchTerm() {
            word = getCaretWord(txt[0]);
            let mlen = minLen + (useAt ? 1 : 0);

            if (word.length < mlen) return;

            if (useAt) {
                if (!word.startsWith('@')) {
                    return;
                }

                return word.substring(1);
            }

            return word;
        }

        // settings
        $('#<%=ChkUseAt.ClientID %>').on('change', function () {
            useAt = $(this).val() === 'true';
        });

        $('#<%=TxtMinLen.ClientID %>').on('change', function () {
            minLen = Number($(this).val());
        });
    });

    function getCaretWord(el) {
        // textarea autocomplete
        function getWordAtPos(s, pos) {
            var preText = s.substring(0, pos);
            if (preText.indexOf(" ") > 0 || preText.indexOf("\n") > 0) {
                var words = preText.split(" ");
                words = words[words.length - 1].split("\n");
                return words[words.length - 1]; // return last word
            }
            else {
                return preText;
            }
        }

        function getCaretPos(ctrl) {
            var caretPos = 0;
            if (document.selection) {
                ctrl.trigger('focus');
                var sel = document.selection.createRange();
                sel.moveStart('character', -ctrl.value.length);
                caretPos = sel.text.length;
            }
            else if (ctrl.selectionStart || ctrl.selectionStart === '0') {
                caretPos = ctrl.selectionStart;
            }

            return caretPos;
        }

        var pos = getCaretPos(el);
        return getWordAtPos(el.value, pos);
    }

    function replaceInTexarea(t, text, word) {
        if (t.setSelectionRange) {
            var sS = t.selectionStart - word.length;
            var sE = t.selectionEnd;
            t.value = t.value.substring(0, sS) + text + t.value.substr(sE);
            t.setSelectionRange(sS + text.length, sS + text.length);
            t.focus();
        }
        else if (t.createTextRange) {
            document.selection.createRange().text = text;
        }
    }
</script>