JSFiddle - React, Tailwind, and code Playground

by CntChen

CSS

#inputbox:focus
{
    box-shadow: 0px 0px 5px 0px #33f;
}

#searchhistory{
    display: none;
    outline: none;
    box-shadow: 0 0 8px 2px #aaa;
    background-color: #fff;
    margin: 0px 0px 0px 5px;
}

#searchhistory a{
    word-wrap:break-word;
    font-size: 12px;
    display: block;
    padding: 3px 5px;
    color: #57a;
    background: white;   
}

#searchhistory a:hover{
    text-decoration: underline;
    cursor: pointer; 
    color: #000;
}

#searchhistory .selected{
    background: #ccc;
}

JavaScript

hwsearcher.searchCookie = hwsearcher.searchCookie || {};
(function() {
  var maxCookieNum = 10;
  var cookieName = 'searchcookie';
  var cookieExpire = 365;
  var cookieSparator = '<=>';

  function _setCookie(c_name, value, expiredays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + expiredays);
    document.cookie = c_name + "=" + escape(value) +
      ((expiredays === null) ? "" : ";expires=" + exdate.toGMTString());
  }

  function _getCookie(c_name) {
    if (document.cookie.length > 0) {
      c_start = document.cookie.indexOf(c_name + "=");
      if (c_start !== -1) {
        c_start = c_start + c_name.length + 1;
        c_end = document.cookie.indexOf(";", c_start);
        if (c_end === -1) c_end = document.cookie.length;
        return unescape(document.cookie.substring(c_start, c_end));
      }
    }
    return '';
  }

  function addSearchCookie(value) {
    if (!value) {
      return;
    }

    var cookieStr = _getCookie(cookieName);
    cookieStr = cookieSparator + cookieStr + cookieSparator;
    cookieStr = cookieStr.replace(cookieSparator + value, '');
    cookieStr = cookieStr.replace(RegExp('^(' + cookieSparator + ')+|(' + cookieSparator + ')+$', 'g'), '');
    cookieStr = cookieStr === ''? value : value + cookieSparator + cookieStr;

    var cookieArr = cookieStr.split(cookieSparator);
    cookieArr = cookieArr.slice(0, maxCookieNum * 4);
    cookieStr = cookieArr.join(cookieSparator);

    _setCookie(cookieName, cookieStr, cookieExpire);
  }

  function getSearchCookieArray() {
    var cookieStr = _getCookie(cookieName);
    if (cookieStr === '') {
      return [];
    }

    cookieArr = cookieStr.split(cookieSparator);
    cookieArr = cookieArr.slice(0, maxCookieNum);
    return cookieArr;
  }

  function deleteSearchCookie(value) {
    var cookieStr = _getCookie(cookieName);
    cookieStr = cookieSparator + cookieStr + cookieSparator;
    cookieStr = cookieStr.replace(cookieSparator + value + cookieSparator, '');
   ...