Search from content example with HTML, CSS, and Javascript
Search from content example with HTML, CSS, and Javascript
BY TEJAS
From this example you can search languages names using searchbox which is written in below of
searchbox.
This example uses HTML, CSS, and Javascript for working. This is simple example which anyone can try
with little-bit knowledge of HTML, CSS, and Javascript.
This is basic example.
What is use of this example?
This example search the terms from below words and execute the javascript code to search that query
in that words.
In below video shows working of Example
below here is a HTML,CSS, and Javascript codes.
main.html :-
<!DOCTYPE html>
<html>
<head>
<title>
Creating Search from content example using HTML CSS and Javascript
</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<input id="searchbar" onkeyup="search_languages()" type="text"
name="search" placeholder="Search animals..">
<ol id='list'>
<li class="languages">HTML</li>
<li class="languages">CSS</li>
<li class="languages">Javascript</li>
<li class="languages">PHP</li>
<li class="languages">C language</li>
<li class="languages">C++ language</li>
<li class="languages">Java language</li>
<li class="languages">Python Language</li>
<li class="languages">Kotlin</li>
<li class="languages">Swift</li>
<li class="languages">Ruby</li>
<li class="languages">ASP.NET</li>
<li class="languages">C#</li>
<li class="languages">j#</li>
</ol>
<script src="./javascript.js"</script>
</body>
</html>
style.css :-
#searchbar{
margin-left: 15%;
padding:15px;
border-radius: 10px;
}
input[type=text] {
width: 30%;
-webkit-transition: width 0.15s ease-in-out;
transition: width 0.15s ease-in-out;
}
input[type=text]:focus {
width: 70%;
}
#list{
font-size: 1.5em;
margin-left: 90px;
}
.languages{
display: list-item;
}
javascript.js :-
function search_languages() {
let input = document.getElementById('searchbar').value
input = input.toLowerCase();
let x = document.getElementsByClassName('languages');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display = "none";
}
else {
x[i].style.display = "list-item";
}
}
}
<!DOCTYPE html>
<html>
<head>
<title>
Creating Search from content example using HTML CSS and Javascript
</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<input id="searchbar" onkeyup="search_languages()" type="text"
name="search" placeholder="Search animals..">
<ol id='list'>
<li class="languages">HTML</li>
<li class="languages">CSS</li>
<li class="languages">Javascript</li>
<li class="languages">PHP</li>
<li class="languages">C language</li>
<li class="languages">C++ language</li>
<li class="languages">Java language</li>
<li class="languages">Python Language</li>
<li class="languages">Kotlin</li>
<li class="languages">Swift</li>
<li class="languages">Ruby</li>
<li class="languages">ASP.NET</li>
<li class="languages">C#</li>
<li class="languages">j#</li>
</ol>
<script src="./javascript.js"</script>
</body>
</html>
style.css :-
#searchbar{
margin-left: 15%;
padding:15px;
border-radius: 10px;
}
input[type=text] {
width: 30%;
-webkit-transition: width 0.15s ease-in-out;
transition: width 0.15s ease-in-out;
}
input[type=text]:focus {
width: 70%;
}
#list{
font-size: 1.5em;
margin-left: 90px;
}
.animals{
display: list-item;
}
javascript.js :-
function search_languages() {
let input = document.getElementById('searchbar').value
input = input.toLowerCase();
let x = document.getElementsByClassName('languages');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display = "none";
}
else {
x[i].style.display = "list-item";
}
}
}