About Me

header ads

PHP MySQL Ajax Live Search


PHP MySQL Ajax Live Search



In this tutorial you'll learn how to create a live MySQL database search feature using PHP and Ajax.
Ajax Live Database Search


You can create a simple live database search functionality utilizing the Ajax and PHP, where the search results will be displayed as you start typing some character in search input box.


In this tutorial we're going to create a live search box that will search the countries table and show the results asynchronously. But, first of all we need to create this table.
Step 1: Creating the Database Table


Execute the following SQL query to create the countries table in your MySQL database.

Example

DownloadCREATE TABLE countries ( id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, name VARCHAR(50) NOT NULL );



After creating the table, you need to populate it with some data using the SQL INSERT statement. Alternatively, you can download the prepopulated countries table by clicking the download button and import it in your MySQL database.


Please check out the tutorial on SQL CREATE TABLE statement for the detailed information about syntax for creating tables in MySQL database system.
Step 2: Creating the Search Form


Now, let's create a simple web interface that allows user to live search the names of countries available in our countries table, just like an autocomplete or typeahead.


Create a PHP file named "search-form.php" and put the following code inside of it.

Example

Download<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>PHP Live MySQL Database Search</title> <style type="text/css"> body{ font-family: Arail, sans-serif; } /* Formatting search box */ .search-box{ width: 300px; position: relative; display: inline-block; font-size: 14px; } .search-box input[type="text"]{ height: 32px; padding: 5px 10px; border: 1px solid #CCCCCC; font-size: 14px; } .result{ position: absolute; z-index: 999; top: 100%; left: 0; } .search-box input[type="text"], .result{ width: 100%; box-sizing: border-box; } /* Formatting result items */ .result p{ margin: 0; padding: 7px 10px; border: 1px solid #CCCCCC; border-top: none; cursor: pointer; } .result p:hover{ background: #f2f2f2; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.search-box input[type="text"]').on("keyup input", function(){ /* Get input value on change */ var inputVal = $(this).val(); var resultDropdown = $(this).siblings(".result"); if(inputVal.length){ $.get("backend-search.php", {term: inputVal}).done(function(data){ // Display the returned data in browser resultDropdown.html(data); }); } else{ resultDropdown.empty(); } }); // Set search input value on click of result item $(document).on("click", ".result p", function(){ $(this).parents(".search-box").find('input[type="text"]').val($(this).text()); $(this).parent(".result").empty(); }); }); </script> </head> <body> <div class="search-box"> <input type="text" autocomplete="off" placeholder="Search country..." /> <div class="result"></div> </div> </body> </html>



Every time the content of search input is changed or keyup event occur on search input the jQuery code (line no-47 to 67) sent an Ajax request to the "backend-search.php" file which retrieves the records from countries table related to the searched term. Those records later will be inserted inside a <div> by the jQuery and displayed on the browser.
Step 3: Processing Search Query in Backend


And here's the source code of our "backend-search.php" file which searches the database based on query string sent by the Ajax request and send the results back to browser.

Example


Procedural Object Oriented PDO

Download<?php /* Attempt MySQL server connection. Assuming you are running MySQL server with default setting (user 'root' with no password) */ $link = mysqli_connect("localhost", "root", "", "demo"); // Check connection if($link === false){ die("ERROR: Could not connect. " . mysqli_connect_error()); } if(isset($_REQUEST["term"])){ // Prepare a select statement $sql = "SELECT * FROM countries WHERE name LIKE ?";

Post a Comment

0 Comments