Simple Steps to Create Live Search using JSON and jQuery

By : Admin     |     How to build a simple search filter with jQuery, Live Text Search using jQuery, Make an instant search application using JSON, Ajax and JQuery, Ajax Search Box in PHP and MySQL, search engine for your site,Client side search filtering using JSON and jQuery     |     01-10-2018

This tutorial cover How to make simple Live Search with JSON Data format by using Ajax JQuery. We have use $.ajax() method for load JSON File data.
This tutorial cover How to make simple Live Search with JSON Data format by using Ajax JQuery. We have use $.ajax() method for load JSON File data.

This tutorial cover How to make simple Live Search with JSON Data format by using Ajax JQuery. We have use $.ajax() method for load JSON File data.

Step 1) Add HTML:​​​​​​​

<div style="width: 700px; margin:40px auto;">
    <div id="search-box-container">
        <label>
            <h2 style="color:blue"> Search here: </h2>
        </label>
        <input type="text" id="search-data" name="searchData" placeholder="Search By Achieve Title..." autocomplete="off" />
    </div>
    <div id="search-result-container" class="selectable" style="border:solid 1px #BDC7D8;display:none; "></div>
    <br>
        <br>
            <div id="result"></div>
            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Achieve Title</th>
                            <th>Achieve Descp</th>
                            <th>Achieve Image</th>
                        </tr>
                    </thead>
                    <tbody id="res_Sec"></tbody>
                </table>
            </div>

Step 2) Add CSS:

Style the input element:

 <style>
      #search-data{
        padding: 10px;
        border: solid 1px #BDC7D8;
        display: inline;
        width: 100%;
      }
      .search-result{
        border-bottom:solid 1px #BDC7D8;
        padding:10px;
        font-family:Times New Roman;
        font-size: 18px;
        color:blue;
      }      
      .selectable {
            cursor: pointer;
        }
 </style>

Step 3) Ajax , Jquery & JSON :

$("#search-data").on("keyup",function(e){
    //alert(e.which);
    
    if(e.which==40){
    }
    
    else if(e.which==38){
    }
    else{
        
    }
    var cur_val=$(this).val();
    //alert(cur_val);
    
    $.ajax({
        type:"POST",
        data:{cur_val:cur_val},
        url:"fetch.php",
        dataType:"json",
        cache:false,
        success:function(r_data){
            //alert(r_data);
            
            if(r_data.length==0){
                $("#res_Sec").html("No Data Found !...");
            }
            else{
                var empty_box="";
                for(i=0; i<r_data.length; i++){
                    //alert(r_data[i].achieve_title);
                    
                    empty_box=empty_box+"<tr><td>"+i+"</td><td>"+r_data[i].achieve_title+"</td><td>"+r_data[i].achieve_descp+"</td><td>"+r_data[i].achieve_image+"</td></tr>";
                    
                    
                }
                
                $("#res_Sec").html(empty_box);
            }
            
        }
        ,error:function(err){
            alert("Try Again !...");
        }
        
    });
    
});

Step 4) Add Mysql  Database : 

​​​​​​​

---