Autocomplete Textbox using jQuery, PHP and MySQLi

Autocomplete Textbox using jQuery, PHP and MySQLi

Today, We want to share with you Autocomplete Textbox using jQuery, PHP and MySQLi.
In this post we will show you php autocomplete textbox from database, hear for jQuery Autocomplete Tutorial with PHP and MySQLi we will give you demo and example for implement.
In this post, we will learn about jquery autocomplete multiple fields using jquery ajax php and MySQLi with an example.

Making the database connection

simple this source code copy and paste your database connection file such as db_connect.php file.

	$conn = new mysqli('localhost', 'root', 'YOUR_PASSWORD', 'YOUR_DB_NAME');
		die("Error: sorry, Can't connect to database");

Making The Interface

this is source code for main HTML interface File name as a index.php.

  Ajax Shopping Cart PHP MYSQLi Tutorial With Example

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

Download Project Scripts

<!DOCTYPE html>
<html lang="en">
	<title>Autocomplete Textbox using jQuery, PHP and MySQLi -</title>
<link rel="stylesheet" type="text/css" href="src/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="src/jquery-ui.css"/>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
	<nav class="gst navbar navbar-default">
		<div class="container-fluid gst">
			<a class="navbar-brand" href=""></a>
</a>		</div>
	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-suceess">Autocomplete Textbox using jQuery, PHP and MySQLi</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<div class="col-md-2"></div>
		<div class="col-md-8">
			<div class="form-group">
				<form action="" method="POST">
					<label>Find Item here...</label>
					<div class="auto-widget">
						<input class="form-control" id="find_item" type="text" name="item"/>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script type="text/javascript">
			source: 'find_item.php',
			minLength: 0,

Making the Main Function

It’s server side source code for file name as a find_item.php

	require_once 'db_connect.php';
	$find_item = $_GET['term'];
	$query = $conn->query("SELECT * FROM `item` WHERE `item` LIKE '%$find_item%' ORDER BY `item` ASC") or die(mysqli_connect_errno());
	$item_lst = array();
	$data_row = $query->num_rows;
	if($data_row > 0){
		while($fetch = $query->fetch_assoc()){
			$data['value'] = $fetch['item']; 
			array_push($item_lst, $data);
	echo json_encode($item_lst);

We hope you get an idea about Autocomplete Textbox using jQuery, PHP and MySQLi
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

  Simple VueJS date picker Component

We hope This Post can help you…….Good Luck!.

Related FAQ

Here are some more FAQ related to this Article:

  1.   Ajax PHP MySQL Creating Autocomplete Search Suggestion
  2.   Laravel Dynamic Change page Title Tags
  3.   Undefined index DT_Row_Index Laravel yajra datatable
  4.   Remove Duplicates value From Array in VueJS
  5.   HTML Form Enctype Multipart Attribute with Examples
  6.   Google Like Autosuggest Search Using PHP Ajax
  7.   Laravel Ajax Autocomplete Search Box Example
  8.   AngularJS Search Auto Suggestion box with PHP MySQLi
  9.   Dynamic Autocomplete Textbox in jQuery Ajax
  10.   Ajax Image Upload without Refreshing Page using Jquery

Leave a Reply

Your email address will not be published. Required fields are marked *