This is a project that, I wanted to create a time ago and is like the title states, a Search Bar using Javascript, so let´s go there.
First we create a new directory of folder with the name Search-Bar in our User folder or C: in the computer , and you can use any text editor that you like, and inside that folder we created we create a file name index.html so we can display the search bar in a browser and we start by typing the head inside the index.html file
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<title>Search Bar</title>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-
JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM\" crossorigin=\"anonymous\">
</script>
</head>
<body>
</body>
</html>
]]>
Now take a look of what we did above, we started our html like the normal DOCTYPE and inside the head we have linked bootstrap to our job, this will work so we can organize our different options on the search bar, now we continue to type the body of our html file.
<![CDATA[
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<h1>SEARCH BAR</h1>
<input type="text" class="myElements" okeyup="search()">
<div class="all">
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="square">
<h3>CAT</h3>
</div>
<div class="square">
<h3>ELEPHANT</h3>
</div>
<div class="square">
<h3>BIRD</h3>
</div>
<div class="square">
<h3>FISH</h3>
</div>
<div class="square">
<h3>LION</h3>
</div>
<div class="square">
<h3>TIGER</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="square">
<h3>DOLPHIN</h3>
</div>
<div class="square">
<h3>SHARK</h3>
</div>
<div class="square">
<h3>MONKEY</h3>
</div>
<div class="square">
<h3>FLY</h3>
</div>
<div class="square">
<h3>LEOPARD</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="square">
<h3>GORILLA</h3>
</div>
<div class="square">
<h3>TUCAN</h3>
</div>
<div class="square">
<h3>SNAKE</h3>
</div>
<div class="square">
<h3>ANT</h3>
</div>
<div class="square">
<h3>CATERPILLAR</h3>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
]]>
Now that we have typed our body, let´s dive into our Javascript file, so we can add functionality and it can display our options that match what we have type in the search bar, that is basically our input tag that is located at the beginning of our body, that we just typed, in the middle you will see the rows and columns of Bootstrap, if you have any questions about what rows and columns are I give the link right here so you can loop it up Bootstrap Grid and if you check at the end of the body we have already link our js file with the name of index.js.
Now we go back to our Search-Bar folder and we create our file name index.js, that is the one that is going to hold our Javascript.
We start our Js code inside the file index.js with the function Search that is going to be called each time that we type in our input tag in the html file, and if we take a look in our input tag has this onkeyup=\"search()\" that is basically the event that we use to call the function.
Now inside our function search we create a variable with the name of field, that is going to get whatever value is in our input.
function search() {
var field = document.querySelector("input").value;
}
And we create another variable with the name of square just below the previous variable that we created, and is going get all the element in our html elements with the class square.
var square = document.getElementsByClassName("square");
Next we create two more variables just below the ones we already created, don´t worry that this are going to be the last variables that we are going to create, the first variable with the name of firstC equals to of getting whatever value that the field variable has to lower case and the other variable with the name of text get all the elements by the tag of tag h3 in the html file.
var firstC = field.toLowerCase();
var text = document.getElementsByTagName("h3");
Now so far our code should look like this.
function search() {
var field = document.querySelector("input").value;
var square = document.getElementsByClassName("square");
var firstC = field.toLowerCase();
var text = document.getElementsByTagName("h3");
}
After we have typed all of this are going to create a for loop, so it can loop trough our array set by the variable text that basically is all the elements that have h3 in out html.
for (var i = 0; i < text.length; i++) {
}
Now inside our for loop we create the variable with the name toL that is going to hold each element while it loops trough the array and it will get the text with innerHTML and it will turn it to lower case.
var toL = text[i].innerHTML.toLowerCase();
Then after we created it our variable we create our if and else statement , the if is going to check the element that we have right now in our loop and we are going is going to check if the characters on the input represented with the variable firstC on the indexOf method that is applied to the element on the loop like this.
if (toL.indexOf(firstC) > -1) {
} else {
}
Now if on of the letters that we have type in the input html match in of the letters or sequence in the elements with the tag h3 represented with the variable text, now if there is not match the value that is going to be returned is -1, for that reason we added > -1
And inside the if statement we add the we add style display to nothing the h3 element and to the parent that is a div to nothing as well, so the elements can be shown if a match is find.
if (toL.indexOf(firstC) > -1) {
text[i].style.display = "\";
text[i].parentNode.style.display = "\";
} else {
}
After we need to fill the else, that is what happens when a match is not found and it will be set the display style to none.
text[i].parentNode.style.display = "none";
And our Javascript should look like this.
function search() {
var field = document.querySelector("input").value;
var square = document.getElementsByClassName("square");
var firstC = field.toLowerCase();
var text = document.getElementsByTagName("h3");
for (var i = 0; i < text.length; i++) {
var toL = text[i].innerHTML.toLowerCase();
if (toL.indexOf(firstC) > -1) {
text[i].style.display = "\";
text[i].parentNode.style.display = "\";
} else {
text[i].parentNode.style.display = "none";
}
}
}
And last but not list we add a little bit of style to our project, we go back to the Search-Bar folder and we create a file with the name of index.css and we type the following code.
body {
background-color: #E26A6A !important;
}
h1 {
color: #D91E18 !important;
text-align: center;
margin-top: 3% !important;
margin-bottom: 3% !important;
}
h3 {
padding: 0%;
color: #F4B350;
}
input[type=text] {
display: block;
margin: 0 auto;
}
.square {
display: inline-block;
margin: 1% 3% 1% 3%;
padding: 2%;
border: 1px solid white;
background-color: #D91E18;
border-radius: 10px;
text-align:center;
}
.hidden {
visibility: hidden !important;
position: absolute;
}
.inline {
display: inline-block;
}
div.all {
margin-top: 2%;
margin-bottom: 2%;
margin-left: 41.5%;
}
And because is already link to or html when we created it at the beginning of this post, try to run on your browser an test it.