JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<input placeholder="AWP | Asiimov (Field-Tested)..." type="text" id="searchBar" name="SerchWeap" size="28" maxlength="120" class="searchBar"  onkeyup="showResult(this.value); openNav();">
<div id='mySidenav' class='sidenav'>
  <a href='javascript:void(0)' class='closebtn' onclick='closeNav()'>&times;</a>
  <div id='liveSearch'></div></div>

CSS

body {
background-repeat: repeat;
background-image: url("/img/bg.jpg");
-moz-background-size: auto; /* Firefox 3.6+ */
-webkit-background-size: auto; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: auto; /* Opera 9.6+ */
background-size: auto; /* Современные браузеры */
}

footer {
 color: white;
}
#liveInt {
		float:right;
	}

.sidenav {
		background-image: url(/img/bg.jpg);
		background-repeat: repeat;
	}
    .searchBar, .searchBar::-webkit-input-placeholder, .sideNav a, .sideNav a:visited, .sideNavPlaceholder {
        	color: #999999;
            vertical-align: middle;
        }
	.sidenav {
		border-left:2px solid #FFD700;
	}

	.sidenav {
	    height: 100%; /* 100% Full-height */
	    width: 0; /* 0 width - change this with JavaScript */
	    position: fixed; /* Stay in place */
	    z-index: 1; /* Stay on top */
	    top: 1;
	    right: 1;
	    background-color: rgba(38, 38, 38, 0.5);
	    overflow-x: hidden; /* Disable horizontal scroll */
	    padding-top: 60px; /* Place content 60px from the top */
	    
	    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
	}
	
	/* The navigation menu links */
	.sidenav a, .sideNavPlaceholder {
	    padding: 4px 4px 4px 32px;
	    text-decoration: none;
	    font-size: 12px;
	    display: block;
	    transition: 0.3s
	}
	
	/* When you mouse over the navigation links, change their color */
	.sidenav a:hover , .offcanvas a:focus {
	    color: #f1f1f1;
	}
    #livesearch {
        	padding-bottom: 120px;
            display:inline;
        }

    .searchBar {
        margin: 8px;
		padding: 5px 15px;
		font-size:14px;
		background: rgba(255, 255, 255, 0.2);
		border-top-left-radius: 5px 5px;
		border-top-right-radius: 5px 5px;
		border-bottom-left-radius: 5px 5px;
		border-bottom-right-radius: 5px 5px;
	}

     .searchBar::-webkit-input-placeholder { /* WebKit browsers */
            opacity: 0.5 !important;
        }

    ::-webkit-scrollbar {
	    width: 12px;
        background-color:...

JavaScript

function showResult(value) {
        if (value.length == 0) {
            document.getElementById("liveSearch").innerHTML = "";
            document.getElementById("liveSearch").style.border = "0px";
            return;
        }

        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("liveSearch").innerHTML = xmlhttp.responseText;
            }
        }

        xmlhttp.open("GET", "search_weapon?search=" + value, true);
        xmlhttp.send();
    }

    document.getElementById("searchBar").addEventListener('keydown', function (event) {
        if (event.keyCode == 13) {
            event.preventDefault();
        }
    });

function openNav() {
	if (validateLength()) {
		document.getElementById("mySidenav").style.width = "350px";
	}
	else
	{
		closeNav();
	}
}

/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
function closeNav() {
    	document.getElementById("mySidenav").style.width = "0";
    	document.getElementById("liveSearch").innerHTML = "";
}

function validateLength() {
 	var value = document.getElementById("searchBar").value;
 	console.log(value);
 	if (value.length == 0) {
   		return false;
	}
 return true;
}