Read Later

Select Discard

Introduction

In this tutorial, I will show you how to make an autocomplete search box by implementing jQuery and AJAX on the script in order for the user entering queries to retrieve information from the MySQL database.

Tags

PHP JavaScript jQuery AJAX MySQL Database keyup Class Content LIKE

Share

• Share
• Share
• Share
• Share
• Share

Introduction

In this tutorial, I will show you how to make an autocomplete search box by implementing jQuery and AJAX on the script in order for the user entering queries to retrieve information from the MySQL database to be displayed under the search box without needing to send a request with a submit button. In that regard, if so you have an enormous amount of information about product specifications, an autocomplete search box works stupendously for you to manage to show all related products to one entry. Furthermore, by optimizing queries, you can create a suggestions or recommendations pop-up for each entry before showing the results as Amazon and eBay do.

I utilized a PHP class to manage to connect and thus select variables from the database by using the query entered by the user, named Autocomplete. In this way, I could code coherently but not intricately to segregate the MySQL user information from the search box page.

For more information about the code files, please visit Source Code section below.

Demonstration

Web Version

Mobile Version

Designing the Search Box

As the search box, I used a text input at the top and for each query entered by the user, which returns a response, implemented a section on the content div below the search box to highlight the response name and type as well.

To style the name span and the type span, I used the nth-of-type() property. I choose to add the linear-gradient property for the content section background and its hover state as well.

Sending the Query with AJAX

To send the query entered by the user without having to add a submit form button, I, simply, used jQuery keyup() method to make an AJAX call to the same page on which the search box and the Autocomplete class are implemented.

If it returns a successful response, the select function in the Autocomplete class prints the response else prints ‘ No entry found!’.

If the query is empty, the select function prints ' Enter a query...'.

After sending the query, the content script allows the user to change the search box value by clicking to any content section as explained on the next chapter.

Getting and Printing the Response

As a reminder, you would have to enter your connection variables on the MySQLDatabase.php file if you wanted to use the connect function in the Autocomplete class as provided in the Preview.rar.

When the user sends the query, the select function in the Autocomplete class interprets the query not only to find any match in the database by using the LIKE operator but also to print each content row under the search box.

It only scans the content from start to the end using the percent sign but you can use other wildcards here.

By clicking to any content section printed by the select function depending on the fetched rows, the user can change the search box value via jQuery although it does not redirect that page instantly.

Source Code

Please sign in to download source code files below as zip folder, including index.html and project images and icon.

<?php

class Autocomplete {

	public $server, $user, $password, $name, $conn, $query;



    public function connect($a, $b, $c, $d){

		$this->server = $a;

		$this->user = $b;

		$this->password = $c;

		$this->name = $d;

		$this->conn = mysqli_connect($this->server, $this->user, $this->password, $this->name);

	}


	
	public function select($query){

		$this->query = $query;

		$sql = "SELECT * FROM `products` WHERE `name` LIKE '$query%'";

		$result = mysqli_query($this->conn, $sql);

		if(mysqli_num_rows($result) > 0){

			if($this->query == ""){

				echo '<span><i class="fas fa-file-import"></i> Enter a query...</span>';

			}else{

			   while($rows = mysqli_fetch_assoc($result)){

				   echo '

				   <section>

				   <span>'.$rows['name'].'</span><br>

				   <span>'.$rows['type'].' / '.$rows['country'].'</span>

				   </section>

				   ';

			    }

			}

			exit();

		}else{

			echo '<span><i class="fas fa-exclamation-triangle"></i> No entry found!</span>';

			exit();

		}

	}


	
}

?>

$(".container").on("keyup", "#query", function(){
	var query = $(this).val();
	$.ajax({
		url: "?query=" + query,
		type: "GET",
		success: function(response){
			$(".content").html(response);
			$(".content").css("display", "block");
		}
	});
});

$(".content").on("click", "section", function(){
	$("#query").val($(this).find("span:nth-of-type(1)").text());
	$(".content").css("display", "none");
});

html{background-color:#eb2e00;}
span{color:white}

.container{position:relative;width:80%;margin:auto;background-color:#ff5c33;}
.content{position:relative;top:-15px;width:80%;margin:auto;background-color:#ff5c33;}
.content section{position:relative;width:95%;background-color:lightblue;background:linear-gradient(45deg, white, lightblue);border:2px solid white;border-radius:10px;margin:auto;margin-bottom:10px;cursor:pointer;}
.content section:hover{background-color:#cccccc;background:linear-gradient(45deg, #cccccc, lightblue);transition:1s;}
.content section span:nth-of-type(1){color:#002699;font-weight:bold;font-size:20px;}
.content section span:nth-of-type(2){color:#1a53ff;font-weight:italic;font-size:15px;}
#query{display:block;width:80%;margin:auto;}