JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="game-search">
	
	<div id="game-list">
		<ul>
			<li class="" value="BeamNG.drive" data-series="BeamNG.drive">BeamNG.drive</li>
			<li class="" value="Crash Bandicoot: N. Sane Trilogy" data-series="Crash Bandicoot">Crash Bandicoot: N. Sane Trilogy</li>
			<li class="" value="Grand Theft Auto V (PC)" data-series="Grand Theft Auto">Grand Theft Auto V (PC)</li>
			<li class="" value="Grand Theft Auto V (PS3/PS4)" data-series="Grand Theft Auto">Grand Theft Auto V (PS3/PS4)</li>
			<li class="" value="Grand Theft Auto V (X360/XBO)" data-series="Grand Theft Auto">Grand Theft Auto V (X360/XBO)</li>
			<li class="" value="Project CARS" data-series="Project CARS">Project CARS</li>
			<li class="" value="Project CARS 2" data-series="Project CARS">Project CARS 2</li>
			<li class="" value="Subnautica" data-series="Subnautica">Subnautica</li>
		</ul>
	</div>

CSS

* {
	font-family: Verdana, sans-serif;
	font-size: 16px;
	margin: 0;
	padding: 0;
}
body {
	background: #efefef;
	color: #282828;
	padding: 2em;
}
div#game-list {
	background: #dedede;
	cursor: pointer;
	display: none;
	max-height: 320px;
	overflow-y: auto;
	position: absolute;
	z-index: 99;
}
input {
	background: rgba(0, 0, 0, 0.1);
	border: 1px solid #282828;
	display: block;
	font-size: 1.25em;
	margin: 0.5em auto;
	min-width: 24em;
	padding: 1em;
	text-align: center;
}
li {
	list-style: none;
	padding: 0.75em 1em;
}
li:focus, li:hover {
	background: #185b95;
	cursor: pointer;
}
.match {
	background: #1c69ad;
	color: #efefef;
	display: list-item;
}
.no-match {
	background: none;
	display: none;
}
.reset {
	display: block;
}

JavaScript

$('#game-search').keyup( function() {
  var input     = $('#game-search');
  var offset    = input.offset();
  var	game_name = $("#game-search").val();

  // List
  function show() {
    $('#game-list').css({
      'display': 'inline-block',
      'left': offset.left,
      'min-width': input.outerWidth(),
      'top': offset.top + input.outerHeight()
    });
  }
  function hide() {
    $('#game-list').css({
      'display': 'none',
      'left': offset.left,
      'min-width': input.outerWidth(),
      'top': offset.top + input.outerHeight()
    });
  }
  if (game_name.length >= 1) {
    show();
  }
  else {
    hide();
  }
  /*$(input).dblclick( function() {
      if ( $('#game-list').css('display') == 'none') {
        show();
      }
      else {
        hide();
      }
    });*/

  // Filter
  var regexp = new RegExp( game_name, "i" );
  //var regexp = new RegExp(/[A-Za-z0-9_()\/]/, "i");
  // [A-Za-z0-9_()\/]
  $("#game-list ul").children("li").each(function(index) {
    if (game_name.length < 1) {
      $(this).addClass('reset').removeClass('match no-match');
    }
    else {
      //if (/[A-Za-z0-9_()\/]/i.test( $(this).html() )) {
      if (regexp.test( $(this).html() )) {
        $(this).addClass('match').removeClass('no-match reset');
      } else {
        $(this).addClass('no-match').removeClass('match reset');
      }
    }
  });

  // Apply
  $('#game-list ul li').click( function() {
    $('#game-search').val( $(this).attr('value') );
    $('#game-list').css('display', 'none');
  });
});