JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<input placeholder="AWP | Asiimov (Field-Tested)..." type="text" id="searchBar" name="q" 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 AND MAIN DIV HEADERS */
	
	.salesTable, .invBuyAndSellLinksTable, .itemTableContainer, #inventoryHolder { 
	        float: none;
        }
        
        #livesearch, .divInvPageButtons, .salesTable, .invBuyAndSellLinksTable, .itemTableContainer {
        	display:inline; 
        }
        
        #assetNavigationContainer {
        	padding-top: 5%;
		padding-bottom: 5%;
        }
        
        #livesearch {
        	padding-bottom: 120px;
        }
	
	body {
	 	padding-top: 2%;
		padding-right: 5%;
		padding-bottom: 2%;
		padding-left: 5%;
	}
	
	.sidenav, body {
		background-image: url(images/img-noise-361x370.png);
		background-repeat: repeat;
	}
	
	.externalTable, .externalTableInvHeader { 
        	padding: 10px;
        	border-spacing: 20px 10px;
        }
	
        .salesTable > tbody {
        	border: 4px solid grey;
        }
        
        .invTable {
        	border-spacing: 20px;
    		border-collapse: separate;
        }
        
        .botTd {
        	min-width: 100px;
        	padding: 13px;
        }
        
        .salesTd {
        	padding-top: 10px;
        	padding-bottom: 10px;
        	padding-left: 2px;
        	padding-right: 2px;
        }
        
        .footerTd {
        	padding-left: 20px;
        	padding-right: 20px;
        }
        
        .salesTdHeader, .salesTd {
                padding-left: 10px;
        	padding-right: 10px;
        }
        
        .salesTdInnerTd {
        	padding-left: 5px;
        	padding-right: 5px;
        }
        
        .salesTdHeader {
                padding-top: 15px;
        	padding-bottom: 15px;
        	padding-left: 10px;
        	padding-right: 10px;
        }
        
        .largeInvTd {
        	padding: 30px;
        }
        
        .invTd {
        	padding: 10px;
        }
        
  	.invTd, .largeInvTd {
        	/* Permalink - use to edit and share this gradient:...

JavaScript

/* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
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;
};

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","process_search_results.php?q="+value, true);
    xmlhttp.send();
}