Autocomplete Search bar CODE Using jQuery, PHP, Ajax, SQL:

 FrontEnd



<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<h2>Autocomplete Search bar using jQuery Ajax PHP and Mysql:</h2>

<label>Search</label>

<input type="text" name="find" id="find" placeholder="Find Name's"><br><br>

<div id="findList"></div>

</body>

</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>

$(document).ready(function(){

$('#find').keyup(function(){

var query = $(this).val();

if (query != '') {

$.ajax({

data : {query: query},

type : "post",

url : "search.php",

success: function(data) {

$('#findList').fadeIn();

$('#findList').html(data);

}

});

}else{

$('#findList').fadeOut();

$('#findList').html("");

}

});

$(document).on('click','li', function(){

$('#find').val($(this).text());

$('#findList').fadeOut();

});

});

</script>



BackEnd


<?php 

$conn = mysqli_connect('localhost','root','','text1') or die ('connection failed');

if (isset($_POST['query'])) {

$output = '';

$query = mysqli_query($conn, "select * from dbemployeelist where dbname like '%".$_POST['query']."%'");

$output = '<ul>';

if (mysqli_num_rows($query) > 0) {

while ($row = mysqli_fetch_array($query)) {

$output .='<li>'.$row["dbname"].'</li>';

}

}

else{

$output .= "<li>This Name not found</li>";

}

$output .='</ul>';

echo $output;

}

?>


Learning Video (YouTube):

Autocomplete Search bar


Screen Shot:

FrontEnd File

BackEnd File



Comments

Post a Comment

Popular posts from this blog

C.R.U.D Oparetion in (PHP Code)

C.R.U.D Oparetion   index.php <?php include "conn.php"; if (isset($_POST["usersubmit"]))  {     $vrname = $_POST["username"];     $vremployee = $_POST["useremployee"];     $vrsalary = $_POST["usersalary"];     $vrgender = $_POST["gender"];     //testing sucessfully complete     // echo $vrname;     // echo $vremployee;     // echo $vrsalary;     // echo $vrgender;     // exit();     $inserting = "INSERT INTO dbemployeelist(dbname, dbemployee, dbsalary, dbgender) VALUES('$vrname', '$vremployee', '$vrsalary', '$vrgender')";     $connecting = mysqli_query($conn,$inserting); } ?> <!DOCTYPE html> <html lang="en"> <head>     <title>Document</title>     <style>         form{             text-align:center;             padding:2...
Read more

Search Dropdown - jQuery

Image
<select name="vehicle_no" id="vehicle_no" class="form-control select" >   <option value="" >Select Vehicle</option>      <?php //echo $vchVehicleNumber;exit;?>           @foreach($vehiclesData as $data)              <option {{(isset($vchVehicleNumber) && $vchVehicleNumber == $data['vehicleno'])?'selected':''}} value="{{ $data['vehicleno'] }}" >{{ $data['vehicleno'] }}</option>              @endforeach </select> // jQuery:- you have to add CDN of select2 jquery $("#vehicle_no").select2({   minimumResultsForSearch: Infinity }); $('#vehicle_no').select2({    minimumInputLength: 0  });
Read more

JavaScript Form Validation Code

 <html>    <head>       <title>Javascript All At Once Validation</title>       <script>          function validate(){          var eid=document.getElementById("eid");          var ename=document.getElementById("ename");          var epass=document.getElementById("epass");          var ecpass=document.getElementById("ecpass");          var eadd=document.getElementById("eadd");          var ecity=document.getElementById("ecity");          var epin=document.getElementById("epin");          var eemail=document.getElementById("eemail");          if(notEmpty(eid,"Employee ID Should Not Be Blank"))          {           if(o...
Read more