Autocomplete Textbox using AJAX in PHP
- Tech Area
- October 27, 2023
In this tutorial, We will learn how to make autocomplete textbox using Jquery AJAX in PHP. We are using one autocomplete textbox to search data from the database using AJAX in PHP.
Files used in this tutorial:
1- connection.php (database connection file)
2- index.php (AJAX script)
3- load-data.php (show data into table)
4- get-data.php (fetch data)
Below are the step by step process of how to make autocomplete textbox using Jquery AJAX.
Step 1: Create a Database connection
In this step, create a new file connection.php to create database connection.
connection.php
<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "college_db";
$connection = mysqli_connect("$server","$username","$password");
$select_db = mysqli_select_db($connection, $database);
if(!$select_db)
{
echo("connection terminated");
}
?>Step 2: Create index.php
In this step, create a new file index.php. This is the main file used to implement AJAX to make autocomplete textbox using AJAX.
This screenshot shows the autocomplete textbox.
index.php
<!DOCTYPE html>
<head>
<title>Autocomplete Textbox using AJAX in PHP</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<style>
#emp-data ul
{
list-style: none;
position: absolute;
top: 33px;
width: 264px;
padding: 8px;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
z-index: 1;
background: white;
}
table th
{
background-color:#e3a53a;
}
</style>
<body>
<div class="container">
<h2 class="text-center">Autocomplete Textbox using AJAX in PHP</h2>
<br/>
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-3">
<div class="form-group">
<input type="text" class="form-control" name="employee" id="employee">
</div>
<div id="emp-data"></div>
</div>
<div class="col-sm-1">
<div class="form-group">
<input type="button" class="btn btn-success" value="Submit" id="sbt_btn">
</div>
</div>
<div class="col-sm-4">
</div>
</div>
<div id="result"></div>
</div>
</body>
</html>Now use jquery AJAX script.
<script type="text/javascript">
$(document).ready(function(){
$("#employee").keyup(function(){
var emp = $(this).val();
if(emp!='')
{
$.ajax(
{
url: 'get-data.php',
method: 'post',
data: {emp_name:emp},
success: function(result)
{
$("#emp-data").fadeIn("fast").html(result);
}
});
}
else
{
$("#emp-data").fadeOut("fast");
}
});
$(document).on("click","#emp-data li",function(){
$("#employee").val($(this).text());
$("#emp-data").fadeOut("fast");
});
$("#sbt_btn").on("click", function(){
var emp_name = $("#employee").val();
if(emp_name!='')
{
$.ajax({
url: 'load-data.php',
method: 'post',
data: {emp:emp_name},
success: function(result)
{
$("#result").html(result);
}
});
}
else
{
alert("Enter Employee Name");
}
});
});
</script>Step 3: Create new file for fetch data
In this step, create a new file load-data.php. This file used to fetch data from database and show into the html table.
load-data.php
<?php
include('connection.php');
$employee = $_POST['emp'];
$fetch_data = mysqli_query($connection,"select * from tbl_registration where name = '$employee'");
$result ='';
if(mysqli_num_rows($fetch_data)>0)
{
$result .='<table class="table table-bordered table-striped">
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Category</th>
<th>Phone</th>
<th>Address</th>
</tr>';
while($res = mysqli_fetch_array($fetch_data))
{
$result .= "<tr>
<td>{$res['id']}</td>
<td>{$res['name']}</td>
<td>{$res['email']}</td>
<td>{$res['category']}</td>
<td>{$res['phone']}</td>
<td>{$res['address']}</td>
</tr>";
}
$result .='</table>';
}
else
{
echo "Employee Not Found";
}
echo $result;
?>Step 4: Create new file for autocomplete textbox data
In this step, create a new file get-data.php. This file used to fetch autocomplete textbox data from the database.
get-data.php
<?php
include('connection.php');
$employee = $_POST['emp_name'];
$fetch_data = mysqli_query($connection,"select name from tbl_registration where name like '%{$employee}%'");
$result = "";
$result .= "<ul>";
if(mysqli_num_rows($fetch_data)>0)
{
while($res = mysqli_fetch_array($fetch_data))
{
$result .="<li>{$res['name']}</li>";
}
$result .="</ul>";
}
else
{
$result .="<li>Employee Not Found</li>";
}
echo $result;
?>Download Source Code
Join 10,000+ subscriber