Skip to content
pakainfo

Pakainfo

Web Development & Good Online education

  • Home
  • Blog
  • Categories
  • Tools
  • Full Form
  • Guest Post
  • Advertise
  • About
  • Contact Us

Bootstrap Autocomplete Search Box / textbox in PHP MySQL

June 26, 2020 Pakainfo jQuery, Ajax, JavaScript, Laravel, Mysql, Mysqli, php Leave a comment

Autocomplete Search Box in PHP MySQL Example or PHP Autocomplete Ajax Textbox From Database Example. Here I shall Know how to integrate step by step an autocomplete search box, textbox in the PHP MySQL database using jQuery UI JavaScript.

Now I shall integrate an autofill php form from PHP mysql database Using jQuery UI JS and Bootstrap typeahead ajax json with a live demo with source code full example.

Autocomplete Search Box / textbox in PHP MySQL

Everytimes, I required to search for Records or data content Like Google using jquery ajax without loading the whole website page. This Article exhibits you how you can integrate an autocomplete search box in PHP MySQL with jQuery UI as well as bootstrap HTML form. This Article exhibits you an simple steps to jquery autocomplete ajax json search with PHP MySQL using jQuery UI js with bootstrap.

Autocomplete Search Box in PHP MySQL With jQuery UI

Contents

  • Autocomplete Search Box in PHP MySQL With jQuery UI
    • Ajax search box php mysql like google
  • Step 1. First Make a DB (config.php) Connection File
  • Step 2. Make an Autocomplete search form
  • Step 3. Make a PHP Script for Search to DB
  • Example 2 Bootstrap Autocomplete with Dynamic Data Load using PHP Ajax
    • jQuery AJAX Callback to Supply Typeahead Source
    • Dynamic Autocomplete using Database
  • Conclusion
    • Read
    • Summary
    • Related posts

Just bellow the some next steps as well as simply integrate the autocomplete ajax json search PHP MySQL from the database with bootstrap typeahead & jQuery UI.

Ajax search box php mysql like google

  • First Make a DB (config.php) Connection File
  • Make an Autocomplete search form
  • Make a PHP Script for Search to DB
  • typeahead vs autocomplete
  • typeahead ajax
  • Dynamic Autocomplete search using Bootstrap Typeahead with PHP Ajax
Also Read This ๐Ÿ‘‰   ajax live data search using jquery php mysql

Step: 1. First Make a DB (config.php) Connection File

In this first step, you will make a file name config.php as well change or update the following source code into your PHP file.

The following the source code is used to connect a MySQL database connection in PHP with mysql in server side code. When I search from MySQL database using PHP, there I shall include config.php file:

<?php
    $server_name='localhost';
    $user_name='root';
    $password='';
    $dbname = "your_database_db_name";
    $conn=mysqli_connect($server_name,$user_name,$password,"$dbname");
      if(!$conn){
          die('Sorry, Dear Please check your details, or Could not Connect MySql Server:' .mysql_error());
        }
?>

Step: 2. Make an Autocomplete search form

In this second step, I required to light weight create an autocomplete search box with change the simply copy paste following the source code into your autocomplete search box in PHP MySQL.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Autocomplete Search Box in PHP MySQL - www.Pakainfo.com</title>
 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
 
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body> 
<div class="dsp container">
  <div class="row dsp">
     <h2>Search Here - TamilRokers</h2>
     <input type="text" name="search-google" id="search-google" placeholder="Please search here...." class="form-control litanswer">  
  </div>
</div>
<script type="text/javascript">
  $(function() {
     $( "#search-google" ).autocomplete({
       source: 'live-search-ajax-google.php',
     });
  });
</script>
</body>
</html>

And then, donโ€™t forget anyway to update the following the list of External CSS as well JS library in your HTML Web page for autocomplete search box form:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

Step: 3. Make a PHP Script for Search to DB

In this third step, you required to create single file name like as a live-search-ajax-google.php and simple you can copy with paste update the following the source code into your PHP file.

The following source code is to ajax Based search into a MySQL database table using jquery an Ajax PHP script:

Also Read This ๐Ÿ‘‰   Laravel 5.7 Get Current User Details using Controller and blade

<?php
require_once "config.php";
if (isset($_GET['term'])) {
     
   $query = "SELECT * FROM products WHERE name LIKE '{$_GET['term']}%' LIMIT 25";
    $result = mysqli_query($conn, $query);
 
    if (mysqli_num_rows($result) > 0) {
     while ($product = mysqli_fetch_array($result)) {
      $res[] = $product['name'];
     }
    } else {
      $res = array();
    }
    //return json res
    echo json_encode($res);
}
?>

Now you can easy to run and check….

Example 2 : Bootstrap Autocomplete with Dynamic Data Load using PHP Ajax

In this tutorial, we are going to display how to load Records dynamically for an autocomplete suggestion list, Bootstrap Typeahead Form text input with search icon. I use jQuery AJAX to call the PHP server side to get Records MySQL Database source code to read the Records from the MySQL database with autocomplete dynamically. The bind& loaded Records will be returned to the source attribute of the Typeahead script to list the autocomplete hint Like google search.

jQuery AJAX Callback to Supply Typeahead Source

The following jQuery script is used to initialize the Bootstrap Typeahead function to integrate autocomplete for an Bootstrap 4 text input with search icon. While typing data to the input tag, the value is sent to the PHP script as the term parameter using jQuery AJAX POST method. This method received the database response in a JSON format and used as the source for showing autocomplete suggestions.

The JSON data is received as well parsed in the AJAX callback by setting the property like dataType: JSON. If you want to display how to handle JSON data with PHP, then the linked tutorial has a full step by step guide on it.

<script>
    $(document).ready(function () {
        $('#txtProducts').typeahead({
            source: function (term, result) {
                $.ajax({
                    url: "live-search-ajax-google.php",
					data: 'term=' + term,            
                    dataType: "json",
                    type: "POST",
                    success: function (data) {
						result($.map(data, function (item) {
							return item;
                        }));
                    }
                });
            }
        });
    });
</script>

Dynamic Autocomplete using Database

The Bellow PHP server side source code to get the Typeahead input as the MySQL SELECT query statement arguments. It will be bound to the term statement to get the connected product name that starts with the term string. It data will be encoded with php json_encode($array of objects) in JSON Data format as well as return to the display of the Typehead source attribute.

<?php		
	$keyword = strval($_POST['term']);
	$search_param = "{$keyword}%";
	$conn =new mysqli('localhost', 'root', '' , 'pakainfo_eccomarce_store');

	$sql = $conn->prepare("SELECT * FROM tbl_product WHERE product_name LIKE ?");
	$sql->bind_param("s",$search_param);			
	$sql->execute();
	$result = $sql->get_result();
	if ($result->num_rows > 0) {
		while($row = $result->fetch_assoc()) {
		$productResult[] = $row["product_name"];
		}
		echo json_encode($productResult);
	}
	$conn->close();
?>

Now you can simply run and check….

Also Read This ๐Ÿ‘‰   Angular js Image Gallery with thumbnails responsive

Conclusion

In this My Best Article, I have Taught about how to integrate an autocomplete search box or textbox in PHP MySQL from the database table using jQuery UI Autocomplete JS.

It is a very helpful for your create a Contact List, important as well as simple example of Autocomplete Search textbox or inputbox in PHP MySQL with jQuery UI JS into the MySQL Database.

Web Programming Tutorials Example with Demo

Read :

  • Jobs
  • Make Money
  • Programming

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about autocomplete search box in php mysql.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, donโ€™t forget to share.

Related posts:

  1. Autocomplete Search Box / textbox in PHP MySQL
  2. PHP Autocomplete Textbox using jQuery Example
  3. PHP MySQL ajax Autocomplete Live Search Box in jQuery
  4. Autocomplete Textbox with Multiple Values using jQuery PHP and MySQL
  5. ajax live data search using jquery php mysql
ajax search box php mysql like googleautocomplete select box in phpautofill php form from mysql databasebootstrap tags input autocomplete php mysqlbootstrap typeahead ajax json exampleglobal search in php mysql with examplesjquery autocomplete ajax json phpphp mysql search form example

Post navigation

Previous Post:Laravel Clear Cache Using Artisan Command (CLI)
Next Post:laravel multi auth (Authentication) guards Example

Advertise With Us

Increase visibility and sales with advertising. Let us promote you online.
Click Here

Write For Us

Weโ€™re accepting well-written informative guest posts and this is a great opportunity to collaborate.
Submit a guest post to [email protected]
Contact Us

Freelance web developer

Do you want to build a modern, lightweight, responsive website quickly?
Need a Website Or Web Application Contact : [email protected]
Note: Paid Service
Contact Me

Categories

3movierulz (64) Ajax (464) AngularJS (377) ASP.NET (61) Bio (109) Bollywood (108) Codeigniter (175) CSS (98) Earn Money (69) Education (61) Entertainment (130) fullform (86) Google Adsense (63) Highcharts (77) History (40) Hollywood (109) JavaScript (1357) Jobs (42) jQuery (1423) Laravel (1088) LifeStyle (53) movierulz4 (63) Mysql (1029) Mysqli (890) php (2121) Programming (2332) Python (97) Software (166) Software (88) Stories (98) tamilrockers (104) Tamilrockers kannada (64) Tamilrockers telugu (61) Tech (141) Technology (2392) Tips and Tricks (119) Tools (203) Top10 (477) Trading (89) Trending (71) VueJs (250) Web Technology (104) webtools (191) wordpress (166) World (322)

A To Z Full Forms

Access a complete full forms list with the meaning, definition, and example of the acronym or abbreviation.
Click Here
  • Home
  • About Us
  • Terms And Conditions
  • Write For Us
  • Advertise
  • Contact Us
  • Youtube Tag Extractor
  • Info Grepper
  • Guest Posting Sites
  • Increase Domain Authority
  • Social Media Marketing
  • Freelance web developer
  • Tools
Pakainfo 9-OLD, Ganesh Sco, Kothariya Ring Road, Chokadi, Rajkot - 360002 India
E-mail : [email protected]
Pakainfo

ยฉ 2023 Pakainfo. All rights reserved.

Top
Subscribe On YouTube : Download Source Code
We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype Guest Posting Sites