5 Steps to Create Ajax Search Suggestions Dropdown in PHP [Free Download]

5 Steps to Create Ajax Search Suggestions Dropdown in PHP

In this article, you are going to learn about creating Ajax Search Suggestions from scratch if you are following from the Ajax Basics tutorial you will find it easy to follow along. If you want to learn PHP more in-depth, visit this website . Otherwise, check out the Ajax Basics article included with videos.

Demo of Ajax Search Suggestions Dropdown in PHP

1. Intial Project Setup

In this first step, I’m going to create all the necessary Files and the HTML code. Then creating the Database & importing Database tables SQL code. If you are following from the previous tutorial then you don’t need to import the database, because we are going to use the previous cities database.

Then after that connecting to the database from PHP files, so that we can easily get the results from the database based on the search query in next steps.

Creating Necessary Files & Code

In this step, we will create all the necessary files. and we will add the code to these files.

We need index.php file for the search input field and displaying the search results in unordered list items.

Next, we need searchresults.php file to get the results from the database and displaying it in the unordered list. Through Ajax request, we will get the data asynchronously.

Add this code in the index.php file. If you load this file in the browser, you should see the search input filed and the unordered list. We will use this unordered list later to display the results.

We should make the list look better, for styling the list I’m using few simple styles. For that create a styles.css file and add this code.

Now you should see an unordered list as drop-down results to the search input field.

2 Creating Ajax Request to send Search Value

In this step, we will create Ajax request to send search input fields value from index.php to searchresulst.php file. For that, we should do 2 things, create Ajax Request JavaScript function and add Event Listener.

Creating JavaScript Function

Here I’m creating a JavaScript function to send the search input fields value from the value attribute of the search input field.

Also, I’m finding the results id element with getElementById. So that we can reuse this in next steps.

I’m naming the JavaScript function with the name of getSearchResults, Then I’m assigning the value of the search input field to the searchVal.

Then logging this value into the console using console.log

Add this above JavaScript functions inside script tag before body tag.

Adding Event Listener

Next, we should execute the JavaScript function with the event. I’m adding an event listener for input event of the search input field, what it means is this event will be triggered for every character input.

After adding the above code, reload the page and type some values. You should see each character as a request in the console log

3. Fetching Search Results from Database with php file

In this step, I’m going to fetch the results from database in searchresults.php.

First of all, connect to the database with this code.

Next, we should fetch the search results from the input keyword. I’m going to get this input keyword with GET method.

Add this remaining code to searchresults.php file

You can check the searchresults.php file, whether it’s working correctly or not with this URL.

searchresults.php?search=ab

You should see the result of cities in this file If you see any PHP errors fix those errors before proceeding to next step.

4. Displaying the Results in Output List

And the final step to complete the Ajax Search Suggestions dropdown List is by completing Ajax Request.

Add this code in the JavaScript Ajax function getSearchResults right below the console.log function.

In the above code, I’m creating a XMLHttpRequest new object. Then creating URL variable to pass the search input fields value in URL.

Then using open function to configuring the XMLHttpRequest object.

After that checking onreadystatechange, if the readyState is 4 then assigning the response to a variable to update innerHTML of the unordered list with id results. After that updating, the display CSS property to block.

5. Hiding Search Results dropdown

The final step is hiding the search results dropdown list when there is no character in search input field.

Here I’m checking if the search input fields value length is less than 1. If it’s less than 1 making id results as display none. So the results won’t be displayed.

Complete code of the Ajax Search Suggestions dropdown List

If you are having a problem combining above pieces of code, use this complete code.

If you have any issues while working the code, let me know through the comments or post it in Coding Cyber FaceBook Group.

Vivek Vengala
 

Vivek Vengala is a Online Entrepreneur, Web Developer from Hyderabad India.

Click Here to Leave a Comment Below 0 comments

Leave a Reply: