PHP MySQL Ajax Autocomplete TextBox From DB Example
https://laratutorials.com/php-mysql-ajax-autocomplete-textbox-from-db-example/
PHP MySQL Ajax Autocomplete TextBox From DB Example
In this jquery autocomplete ajax PHP MySQL, i will use jquery, ajax, json and PHP MySQL.
Also, you can use this code personally and professionally.
PHP MySQL Ajax Autocomplete textbox using jQuery UI
Let’s follow following easy steps to build autocomplete search box in php mysql using jQuery ajax:
Step 1 – Requirement and Create Directory
In step 1, Navigate to your local web server directory. And inside this directory, create one directory. And you can name this folder anything.
Here, I will “demo” the name of this folder. Then open this folder in any text editor (i will use sublime text editor).
Step 2 – Create phpmyadmin MySQL Database and Connecting File
In step 2, you need to create database and table. So run the following sql query to create database and table:
Then create a php file that named mydbCon. Which is used to connect phpmyadmin mysql database to project (demo).
So, now create mydbCon file and add the below given code into your file:CREATE DATABASE my_db;CREATE TABLE `customers` ( `id` int(10) UNSIGNED NOT NULL, `fname` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL, `lname` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL, `email` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL, `created_date` date DEFAULT NULL) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
Step 3 – Create Autocomplete Search HTML Form
In step 3, create a php file that named autocomplete-search.php. This file will display autocomplete textbox using jquery php and mysql like google autocomplete textbox.
Here, i will use jQuery ui with ajax to auto fill search data from database without realoding the whole web page. Now, you need to add the following ajax live search html form code into autocomplete-search.php file:<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>Autocomplete textbox using jquery php and mysql like google autocomplete textbox</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script><body><div class="container mt-4"> <div class="row"> <h2>PHP AJAX Autocomplete Textbox From Database Example</h2> <input type="text" name="autocomplete-search" id="autocomplete-search" placeholder="search here...." class="form-control"> </div></div><script type="text/javascript"> $(function() { $( "#autocomplete-search" ).autocomplete({ source: 'ajax-autocomplete-search-data.php', }); });</script></body></html>
Step 4 – Create Ajax Autocomplete Search From Database File
In step 4, create new file that named ajax-autocomplete-search.php file. Because this is used to autocomplete search form data into mysql database and return response in JSON format.
So, add the below code into your ajax-autocomplete-search.php file:<?phpinclude 'mydbCon.php';$term = mysqli_real_escape_string($dbCon,$_GET['term']);$sql = "SELECT * FROM customers WHERE fname LIKE '$term%'";$query = mysqli_query($dbCon, $sql);$result = [];while($data = mysqli_fetch_array($query)){ $result[] = $data['fname'];}echo json_encode($result);?>
Last updated
