Search from content example with HTML, CSS, and Javascript

Search from content example with HTML, CSS, and Javascript

Avatar

 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";
                }
            }
        } 
    
Search
Advertisement
Share With
Follow us on
Advertisement