JSFiddle - React, Tailwind, and code Playground

by CntChen

HTML

<div id="inputbar">
        <input type="text" id="inputbox" />
        <div id="searchhistory">
        </div>
      </div>
<a id="go" href="javascript:void(0);"></a>

JavaScript

var searchInputSelectionStart = 0;
    $('#inputbox').click(function() {
      if ($('#searchhistory')[0].innerHTML === ''){
        return;
      }
      
      var selectionStart = $('#inputbox')[0].selectionStart;
      if ($('#inputbox').val().length === 0 || 
        selectionStart === 0 ||
        selectionStart === $('#inputbox').val().length ||
        selectionStart === searchInputSelectionStart) {
        $('#searchhistory').toggle();
      } else {
        $('#searchhistory').hide();
      }
      searchInputSelectionStart = selectionStart;
    });

    readHistory();

    $("#inputbox").keyup(function(event) {
      var key = event.which;
      if (key === 13) {
         $('#searchhistory').hide();
        submitSearch();
      }
      if (key === 38) {
        var historyNow = getHistroyNow();
        gotoHistory(historyNow - 1);
      }
      if (key === 40) {
        var historyNow = getHistroyNow();
        gotoHistory(historyNow + 1);
      }
    });

  function addHistory(){
    hwsearcher.searchCookie.addSearchCookie($("#inputbox").val());
  }

  function readHistory(){
    var html = '';
    var searchHistoryArr = hwsearcher.searchCookie.getSearchCookieArray();
    var length = searchHistoryArr.length;
    if(length === 0){
      $('#searchhistory')[0].innerHTML = '';
      return;
    }

    for (var i = 0; i < length; i++) {
      html = html + '<a>' + searchHistoryArr[i] + '</a>';
    };

    $('#searchhistory')[0].innerHTML = html;
    UiHelper.popupMgr.register("searchhistory", [$("#searchhistory")[0], $('#inputbox')[0]], function() {
      $("#searchhistory").hide();
    });

    $('#searchhistory a').click(function(){
      $('#inputbox').val(this.innerHTML);
      $('#searchhistory a').removeClass('selected');
      $(this).addClass('selected');
      $('#searchhistory').hide();
      submitSearch();
    });
  }

  function getHistroyNow(){
    var searchHistory = $('#searchhistory a');    
    var length = searchHistory.length;
   ...