This is a super simple jQuery Autocomplete dropdown search bar. It gets the data from MySQL database with Ajax, PHP. This script is ideal if you are designing an eCommerce website or any other website with a lot of content.

You can learn how to create a jQuery autocomplete ajax live search bar By following the simple steps below.

  • Step 1: Create a MySQL database.
  • Step 2: Paste below SQL code in the SQL tab & run. (it will create the table with demo data.)
  • Step 3: Create a config.php file & insert database details.
  • Step 4: Create an index.php file with the code below.
  • Step 5: Create PHP file fetch.php & insert the below code.

Then go to the file directory & type any programming language name in the Ajax live search bar. You’ll see the fetched data from the database as a dropdown.

jQuery Autocomplete from Database Preview

if you have any error with the code, you can easily download it below.

Before jump in to the code, Let’s see what are the features of this jQuery Autocomplete search.

  • Hiding search area placeholder on focus.
  • Displaying data from the database with a clean dropdown.
  • A dropdown will be hidden if the user clicks on other areas of the web page.
  • No result message if nothing found from the database that related to your search.

Why Autocomplete Search bar for a website?

Let’s get the best example, Google! When you search for something on google you can easily find exactly what you are looking for from the autocomplete dropdown. It’s a good user experience. What if google doesn’t have that feature? You’ll have to type one by one pressing the search until you find what you want.

Your website users are always looking for something from your website. You should provide the easiest way for them to search. If you quickly suggest what your website has, when user types in the search bar, it’ll save their time.

Here’s the code for this simple search bar.

MySQL – Copy & paste on the database’s SQL query area & run it

CREATE TABLE `languages` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `l_name` varchar(15) NOT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `languages` (`id`, `l_name`) VALUES
(1, 'HTML'),
(2, 'CSS'),
(3, 'PHP'),
(4, 'JavaScript'),
(5, 'Java'),
(6, 'Swift'),
(7, 'C#'),
(8, 'Ruby'),
(9, 'SQL'),
(10, 'Elm'),
(11, 'TypeScript'),
(12, 'Unity'),
(13, 'Scala'),
(14, 'Go'),
(15, 'Rust'),
(16, 'Objective C');

Config.php – Separate file with the database details & connection.

<?php
	$servername = "localhost";
	$username = "db_username";
	$password = "db_password";
	$dbname = "db_name";
	$conn = mysqli_connect($servername, $username, $password, $dbname);		
	if($conn->connect_errno){echo "Failed to connect to MySQL: (".$conn->connect_errno .")".$conn->connect_error;}
?>

index.php HTML Part – Structure of the search bar

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Bar Demo</title>	
</head>
<body>
	<header class="clear">		
		<div class="logo_area">
			<a href=""><img src="https://techmytip.com/wp-content/uploads/2019/12/techmytip-logo-1.png" alt="logo" /></a>
		</div>
		<div class="search_area">
			<div class="mainSearch">
			<img src="https://techmytip.com/wp-content/uploads/2020/11/magni-icon.png" alt="searchicon">
			<input type="text" autocomplete="off" name="search_text" id="mainSearch" placeholder="Search for Anything .." onfocus="this.placeholder = ''" onblur="this.placeholder = 'Search for Anything ..'">
			<div id="result"></div>
			</div> 
		</div>
		
	</header>
	
	<section class="content_area">
		<h1>jQuery Autocomplete Search Bar from MySQL Database with Ajax, PHP - Demo</h1>
		<div class="back_button"><a href="">BACK TO TUTORIAL</a></div>
	</section>

</body>
</html>

index.php CSS Part – Place this in the <head> area of the index.php page or create a separate stylesheet with the below code.

		/*CSS Reset*/
		@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,600,600i,700i,800|Raleway:300,400,600,700,800&display=swap');
		html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: ''; content: none;}table {	border-collapse: collapse;	border-spacing: 0;}
/*End CSS Reset*/
body {font-family: 'Montserrat', sans-serif;}
header { width: 100%; height: 76px; background: #FFF; box-shadow: 1px 1px 10px rgba(0,0,0,0.15)}
.clear { clear:both;} .clear::after {  content: "";  clear: both;  display: table;}
a {text-decoration:none}
.logo_area { width:26%; float: left;  padding:0 30px}
.logo_area img { width:200px}
		
.search_area {width:40%; float: left}
.mainSearch { width: 100%; height: 46px;  border-radius: 5px;  background-color: rgba(0,0,0,0.04);  box-sizing: border-box;  position: relative; margin: 15px 0px;}
.mainSearch input[type=text] {	width: 94%;	border: none;	background: none;	height: 46px;	padding: 5px 15px;	margin-left: 35px; font-family: 'Montserrat', sans-serif;	font-weight: 500;	box-sizing: border-box;	font-size: 16px; color: #666}
.mainSearch input[type=text]:focus { outline:none;}		
.mainSearch img { width: 22px; opacity: 0.5; display: inline-block; position: absolute; padding: 6px; margin: 6px; border-radius: 50%; -webkit-transition: background .2s;}
.mainSearch img:hover { background:#B9B9B9;}
#result{ width:100%; position:absolute;  z-index:6; max-height:200px;	top: 100%; left: 0; font-family: 'Roboto', sans-serif; font-size:16px;   }
#result ul {background:#FFFFFF; border-bottom-left-radius:5px; border-bottom-right-radius:5px;
-webkit-box-shadow: 0 4px 8px  rgba(0,0,0,.2);
-moz-box-shadow: 0 4px 8px  rgba(0,0,0,.2);
box-shadow: 0 4px 8px  rgba(0,0,0,.2); }
#result ul li {display: block;}
#result ul li :hover { background-color: rgba(0,0,0,0.04); }
#result ul li a {color: rgba(0,0,0,.87); text-decoration:none; padding:20px; display:block;}	
		
/*Some additional CSS you can ignore*/		
h1{ font-size: 30px; font-weight: 600; color: #333333; text-align: center; margin: 50px auto 0 auto; line-height: 1.2; width: 50%}
.content_area { padding: 20px}
.back_button {display:table; margin: 0 auto; margin-top: 50px}
.back_button a{ display: block; padding:20px 30px; background:#424FD2; color: #FFFFFF; border-radius: 30px; -webkit-box-shadow: 0px 7px 16px 5px rgba(66,79,210,0.2);  -moz-box-shadow: 0px 7px 16px 5px rgba(66,79,210,0.2);   box-shadow: 0px 7px 16px 5px rgba(66,79,210,0.2); transition: all 0.2s }
.back_button a:hover {box-shadow: none}
@media only screen and (max-width: 780px) {
        .logo_area { width:100%; padding: 0;}
	.logo_area img {display:block; margin: 0 auto}
	.search_area {width:100%; padding: 0 10px; box-sizing: border-box}
	.mainSearch {margin-top:0; }
	header {height: auto;}
	h1{width: 100%}
	}
	

Calling jQuery

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>	

index.php JavaScript Part – Place this code just before the closing </body> tag after the jquery.

<script type="text/javascript">
	$(document).ready(function(){
 load_data();
 function load_data(query)
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   data:{query:query},
   success:function(data)
   {
    $('#result').html(data);
   }
  });
 }
 $('#mainSearch').keyup(function(){
  var search = $(this).val();
  if(search != '')
  {
   load_data(search);
  }
  else
  {
   load_data();
  }
 });
});
	
//toggle view on click body & search area   
	var result = document.getElementById('result');
	document.onclick = function(e){
	   if(e.target.id !== 'mainSearch'){
		  result.style.display = 'none';
	   }else result.style.display = 'block';
	};
</script>	

fetch.php file

<?php
error_reporting(E_ALL ^ E_NOTICE);
include('config.php');
$output = '';
if(isset($_POST["query"])){
 $search = mysqli_real_escape_string($conn, $_POST["query"]);
 $query = "SELECT * FROM `languages` WHERE `l_name` LIKE '%".$search."%' LIMIT 8";
	$result = mysqli_query($conn, $query);
if(mysqli_num_rows($result) > 0){ 
 while($row = mysqli_fetch_array($result)) {
  $output .= '   
    <li><a href="">'.$row["l_name"].'</a></li>';
 }
 echo  "<ul id='ss'>";
 echo $output;
 echo  "</ul>";} 
else {  echo  "<ul>"; 
echo ' <li><a>Sorry, No Result Found :(</a></li>';  
echo  "</ul>";}}
?>

Conclusion

Hope you’ve learned how to create a simple jQuery Autocomplete search bar that fetches the data from MySQL database using PHP. I have explained this tutorial very simply to understand any newbie.

If you found this post is useful, don’t forget to share this on your favorite social media platform. That’ll be the biggest support from you to make more useful tutorials like this. Cheers ✌

Author

Hi! I’m Dimuthu Freelance Web Designer, Developer, Creative Graphic Designer, Digital Marketer & Successful Blogger. Hire me! if you need any support.

Write A Comment

Pin It