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

Abhigyan Singh 12th Jul 2020

This tutorial describes about auto complete search in PHP, Mysql, Json. Auto complete 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.

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

Importance of Autocomplete search box functionality

This Autosuggestion is very important where 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 features is used by most of the website these days.

It just shows the related suggestion based on the input keyword. Here we are using 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 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. Json can be easily read and write by Human 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 user enter any word then a jquery event occurs. This jquery have autocomplete 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 json_encode method we will encode that data and print that encoded data. Here we can make a link over all data and when user clicks on any data then user will be navigate 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 user 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 issue with this tutorial, Please write us on 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 javascript function and then pass it to 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 DISCUSS DESK