JSFiddle - React, Tailwind, and code Playground

by learner001

HTML

<input type="text" value="" id="dSuggest" />
<select id='sel'>
  <option>item 1</option>
  <option>item 2</option>
  <option>item 3</option>
  <option>item 4</option>
</select>

JavaScript

$(document).ready(function() {
    $("#dSuggest").keyup(function() {
        var dInput = $(this).val();
        if(dInput == '@'){
          openDropdown("sel");
        }
      
    });
});


function openDropdown(elementId) {
  function down() {
    var pos = $(this).offset(); // remember position
    var len = $(this).find("option").length;
    if (len > 20) {
      len = 20;
    }

    $(this).css("position", "absolute");
    $(this).css("zIndex", 9999);
    $(this).offset(pos); // reset position
    $(this).attr("size", len); // open dropdown
    $(this).unbind("focus", down);
    $(this).focus();
  }

  function up() {
    $(this).css("position", "static");
    $(this).attr("size", "1"); // close dropdown
    $(this).unbind("change", up);
    $(this).unbind('click keyup', onDropdownEvent);

  }

  function onDropdownEvent() {
    if (event.type !== 'keyup' || event.which == 13) {
      event.preventDefault();
      $(element).blur();
    }
  }

  var element = $("#" + elementId);
  $(element).focus(down).blur(up).focus();
  $(element).bind('click keyup', onDropdownEvent);

}