JavaScript - Real Time Search

Submitted by razormist on Friday, August 2, 2019 - 11:29.

In this tutorial we will create a Real Time Search using JavaScript. This code will search a specific data every time the user enter some characters in the textbox. The code use onclick() function to call a specific function that automatically filter the data when entered, by using a for() loop and adding a if statement with an argument indexOf() in order to filter the index position of an array. Feel free to modify and apply it in your system, this is a user-friendly kind of program We will be using JavaScript as a server-side scripting language because It gives a greater control of your web page and extend its capability in a modern way approach. It is written in HTML or as an external sourcing to add some necessary features in your website.

Getting started:

First you have to download bootstrap framework, this is the link for the bootstrap that I used for the layout design https://getbootstrap.com/.

The Main Interface

This code contains the interface of the application. To create this just write these block of code inside the text editor and save it as index.html.

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
                <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        </head>
<body>
        <nav class="navbar navbar-default">
                <div class="container-fluid">
                        <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
                </div>
        </nav>
        <div class="col-md-3"></div>
        <div class="col-md-6 well">
                <h3 class="text-primary">JavaScript - Real Time Search</h3>
                <hr style="border-top:1px dotted #ccc;"/>
                <div class="col-md-4">
                        <div class="form-group">
                                <label>Enter a name</label>
                                <div class="input-group">
                                        <div class="input-group-addon"><span class="glyphicon glyphicon-search"></span></div>
                                        <input type="text" id="search" placeholder="Search here..." onkeyup="liveSearch()" class="form-control"/>
                                </div>
                        </div>
                </div>
                <div class="col-md-8">
                        <table class="table table-bordered">
                                <thead class="alert-info">
                                        <tr>
                                                <th>Full Name</th>
                                        </tr>
                                </thead>
                                <tbody id="result"></tbody>
                        </table>
                        <ul class="list-group" id="list"></ul>
                </div>
        </div>
<script src="js/script.js"></script>
</body>
</html>

Creating the Script

This code contains the script of the application. This code will search a data when entered. To do this just copy and write these block of codes inside the text editor, then save it as script.js inside the js folder.

var members = ['Tony Stark', 'Steve Rogers', 'John Smith', 'Claire Temple', 'Grace Toha', 'James Yhup', 'Isko Morren', 'Natalya Flash'];
        
displayMember();
 
function displayMember(){
        members.sort(function(a,b){
                if(a < b){
                        return -1;
                }
 
                if(a > b){
                        return 1;
                }
 
                return 0;
        });
        
        data = "";
        
        for(var i=0; i < members.length; i++){
                data += "<tr><td>"+members[i]+"</td></tr>";
        }
        
        document.getElementById('result').innerHTML = data;
}
 
function liveSearch(){
        var search=document.getElementById('search').value.toLowerCase();
        var parent=document.getElementById("result");
        var children=parent.getElementsByTagName('tr');
        
        for(var i=0; i<children.length; i++){
                var keyword=children[i].innerText;
                if(keyword.toLowerCase().indexOf(search)>-1){
                        children[i].style.display="";
                }else{
                        children[i].style.display = "none";
                }
        }
        
}

There you have it we successfully created a Real Time Search using JavaScript. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!

Add new comment

194 views