Starting Vocational Training From 1-May-2024 Get Detail

Simple Steps to Create Live Search using JSON and jQuery

By : Admin     |     Website     |     1st October 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.

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

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

Step 2) Add CSS:

Style the input element:

        padding: 10px;
        border: solid 1px #BDC7D8;
        display: inline;
        width: 100%;
        border-bottom:solid 1px #BDC7D8;
        font-family:Times New Roman;
        font-size: 18px;
      .selectable {
            cursor: pointer;

Step 3) Ajax , Jquery & JSON :

    else if(e.which==38){
    var cur_val=$(this).val();
                $("#res_Sec").html("No Data Found !...");
                var empty_box="";
                for(i=0; i<r_data.length; i++){
            alert("Try Again !...");

Step 4) Add Mysql  Database :