Simple Steps to Create Live Search using JSON and jQuery

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 : 

​​​​​​​