Autocomplete search in PHP, Mysql, Json with href Link Navigation

Abhigyan Singh 10th Oct 2020

This tutorial describes an auto-complete search in PHP, Mysql, JSON. Autocomplete search is very important in present Web Technology. This is very similar to Facebook or Google-like Autosuggestion box, autocomplete search box, or auto search box.

Autocomplete search means that when users enter any keyword in the text field then all the content related to the word comes into a drop-down where users can scroll and view their respective content.

Importance of Autocomplete search box functionality

This Autosuggestion is very important where the user does not aware of their exact search and this tutorial will describe the dynamic Autosuggestion functionality where the data comes from the database. This Autosuggestion feature is used by most of the websites these days.

It just shows the related suggestion based on the input keyword. Here we are using the jQuery UI Autocomplete plugin, which is very easy to integrate. it is very helpful where the search result is very high but using this autocomplete suggestion box we can easily get the exact result. I have created another article related to the Autocomplete places search box using Google Maps JavaScript API.

Here once user types any keyword then the plugin just search with that keyword into the data and shows all the relevant result using JQuery UI plugin.

Explanation of code Implementation

Autocomplete search in PHP, Mysql, and JSON

What is JSON?

JavaScript Object Notation (In sort JSON), is a lightweight data-interchange format. Jason can be easily read and write by humans because it is a text format and it is completely language independent.

JSON has two working structure:

• A collection of name/value pairs.

• An ordered list of values.

Here we will use just a simple input text box to get the user input data and when the user enters any word then a jquery event occurs. This jquery has an auto-complete function. This function is responsible for autocomplete in Jquery UI. We will use a Jquery UI Custom javascript (Please do not change anything in this javascript).

<script type="text/javascript">

$(function() {

$("#dd_user_input").autocomplete({
source: "global_search.php?cityId=28",
minLength: 2,
select: function(event, ui) {
var getUrl = ui.item.id;
if(getUrl != '#') {
location.href = getUrl;
}
},

html: true,

open: function(event, ui) {
$(".ui-autocomplete").css("z-index", 1000);
}
});

});
</script>

<form><input id="dd_user_input" class="search_form" type="text" value="Type your Input Here" /></form>

This function calls an external file called global_search.php. In this file, we will get the user input data and trim it. After that, we will make MySQL query to get related data and store it in an array.

Then using the json_encode method we will encode that data and print that encoded data. Here we can make a link overall data and when the user clicks on any data then the user will be navigated to that URL.

 
/*============ Database Connection Code Start Here ============== */ 
define ("DB_HOST", "localhost"); // set database host 
define ("DB_USER", ""); // set database user 
define ("DB_PASS",""); // set database password 
define ("DB_NAME",""); // set database name 
$link = mysql_connect(DB_HOST, DB_USER, DB_PASS) or die("Couldn't make connection."); 
$db = mysql_select_db(DB_NAME, $link) or die("Couldn't select database"); 
/*============= Database Connection Code End Here =============== */ 

// Here, we will get user input data and trim it, if any space in that user input data 
$user_input = trim($_REQUEST['term']); 
// Define two array, one is to store output data and other is for display 
$display_json = array(); 
$json_arr = array(); 
$user_input = preg_replace('/s+/', ' ', $user_input); 
$query = 'SELECT bg.title, bg.url FROM TABLE_NAME bg WHERE bg.blog_title 
LIKE "%'.$user_input.'%"'; 
$recSql = mysql_query($query); 
if(mysql_num_rows($recSql)>0)
{
while($recResult = mysql_fetch_assoc($recSql)) {
$json_arr["id"] = "https://discussdesk.com//".$recResult['url'].".htm";
$json_arr["value"] = $recResult['title'];
$json_arr["label"] = $recResult['title'];
array_push($display_json, $json_arr);
}
} else {
$json_arr["id"] = "#";
$json_arr["value"] = "";
$json_arr["label"] = "No Result Found !";
array_push($display_json, $json_arr);
}

$jsonWrite = json_encode($display_json); //encode that search data
print_r ($jsonWrite);

This tutorial is different because here we can learn auto-complete with href navigation. This is a complete auto search tutorial where after searching users can navigate to their URL. You can also add any thumbnail images in the suggestion drop-down or can do any modification in it.

You can also view the live demo of the auto-complete search functionality and download the code from our repository.

If you have any issues with this tutorial, please write to us in the comment section.

Frequently Asked Question :

  1. How to pass additional parameter in global_search.php file

Answer: You can take any hidden parameter inside the form and take the value of this filed in a javascript function and then pass it to the global_search.php file.

Authored By Abhigyan Singh

He is a continuous blogger and has blogged on different topic. He loves to surf Internet and always trying to get new Idea about new Technology and Innovations and sharing these great information to all the technology lovers.

Also on DiscussDesk