---
description: https://laratutorials.com/php-ajax-live-search-from-mysql-database/
---

# PHP Ajax Live Search From MySQL Database

## PHP Ajax Live Search From MySQL Database

Hello PHP developers, ajax live data search using jquery php mysql. In this post, i will teach you how to to build ajax live data search using jquery php mysql without page refresh using ajax jquery.

Also, you can use this code personally and professionally.

### Ajax Live Data Search using jQuery PHP MySQL

The following PHP MySQL live data search javascript/jQuery and ajax code will search data from database and display without refresh/reloading whole web page.

Let’s follow following easy steps to build ajax live data search using jquery php mysql:

#### 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 Ajax Live Search HTML Form

In step 3, create a php file that named **ajax-live-search.php**. This file will display PHP MySQL live search box.

Here, i will use jQuery ajax to search from database without realoding the whole web page. Now, you need to add the following ajax live search html form code into **ajax-live-search.php** file:\<!DOCTYPE html>\<html lang="en">\<head> \<meta charset="UTF-8"> \<title>php mysql ajax live data search\</title> \<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>\</head>\<body>\<div class="container"> \<div class="row"> \<div class="col-md-12"> \<center>\<h2>PHP MySQL ajax live data search\</h2>\</center> \</div> \</div> \<br> \<div class="row"> \<div class="col-md-6 col-md-offset-3"> \<!-- Form data start --> \<form action="" method="POST" class="form-inline" role="form"> \<div class="form-group"> \<label class="" for="">Search a Query : \</label> \<input type="text" name="search\_term" id="search\_term" autocomplete="on" placeholder="search user name here...." class="form-control search\_term"> \</div> \</form> \<div id="data-container">\</div> \<!-- Form data end --> \<div class="selected\_data\_containter" id="selected\_data\_containter"> \</div> \</div> \</div> \</div>\</body>\<script type="text/javascript">$('#search\_term').keyup(function() { var search\_term = $(this).val(); var key = { search\_term : search\_term } var resp\_data\_format=""; $.ajax({ url:"ajax-search-db.php", data : key, method : "post", dataType : "json", success : function(response) { for (var i = 0; i < response.length; i++) { resp\_data\_format=resp\_data\_format+"\<li class='select\_customer'>"+response\[i]+"\</li>"; }; $("#data-container").html(resp\_data\_format); } });});$(document).on( "click", ".select\_customer", function(){ var selected\_customer = $(this).html(); $('#search\_term').val(selected\_customer); $('#data-container').html('');});\</script>\</body>\</html>

#### Step 4 – Create ajax-search-db.php

In step 4, create new file that named **ajax-search-db.php** file. Because this is used to search form data into mysql database without realod the web page.

So, add the below code into your **ajax-search-db.php** file:\<?phpinclude 'mydbCon.php';$search\_term = mysqli\_real\_escape\_string($dbCon,$\_POST\['search\_term']);$sql = "SELECT \* FROM customers WHERE fname LIKE '$search\_term%'";$query = mysqli\_query($dbCon, $sql);$result = \[];while($data = mysqli\_fetch\_array($query)){ $result\[] = $data\['fname'];}echo json\_encode($result);?>
