<body>
	<div class="container">
		<input autocomplete="off" id="search" class="search" type="text" placeholder="Search">
		<div id="searchTerms" class="searchTerms">
			<div class="terms">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
			<br>
			<div class="terms">Recusandae, nostrum reprehenderit tenetur culpa molestiae voluptatibus natus blanditiis</div>
			<br>
			<div class="terms">veniam eaque perspiciatis laudantium molestias odit ab, cupiditate hic?</div>
			<br>
			<div class="terms">Harum excepturi debitis unde</div>
			<br>
			<div class="terms">Test</div>
			<br>
			<div class="terms">THIS</div>
			<br>
			<div class="terms">teXt</div>
			<div class="terms">Emily's</div>
			<br>
			<div class="terms">SEARCH!</div>
			<br>
   	</div>
	</div>
</body>
body {
	margin: auto;
}

.container {
	font-family: Avenir;
	height: 100vh;
	width: 75vw;
	margin: auto;
	padding-top: 50px;
}

.searchTerms {
	margin-top: 25px;
}

.search {
	height: 40px;
	width: 90%;
	margin: auto;
	font-size: 20px;
	font-weight: 300;
	text-align: center;
}
var searchBar = document.querySelector('#search');

searchBar.addEventListener('keyup', function(){
    var val = searchBar.value;
    var lowerVal = val.toLowerCase();
    var targetTerms = document.querySelectorAll('.terms');
    
    Array.prototype.map.call(targetTerms, function(obj) {
        var wordBit = obj.innerHTML.toLowerCase();
        var isIncluded = wordBit.includes(lowerVal);
        if (!isIncluded) {
            var vanish = obj;
            vanish.style.display = 'none';
        } else {
            obj.style.display = 'block';
        }
        return obj.value;
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.