PHP AJAX Live Search

PHP AJAX live search is a search feature that displays search results as you type, without having to submit the search query. This feature is becoming increasingly popular on websites because it provides a faster and more intuitive search experience for users.

PHP is a server-side programming language used to create dynamic web pages. When combined with AJAX, PHP can be used to create a live search feature that updates search results in real-time, providing a more responsive and user-friendly search experience.

With PHP AJAX live search, your users will have access to real-time search results as they type in their queries. This feature is particularly useful for large datasets, which can be tedious to search through due to the large number of items and the amount of data per item.

In this article, we will explore PHP AJAX live search and how to implement it in your web application. We will guide you step-by-step and provide you with code examples to help you get started.

Table Of Content-

To implement PHP AJAX live search, you will need to use HTML, JavaScript, and PHP.

The following steps will guide you through the process:

  1. Create an HTML search form with an input field for the user to enter their search query.
  2. Add JavaScript code that listens for changes to the input field and sends an AJAX request to the PHP script with the search query as a parameter.
  3. Create a PHP script that receives the search query parameter and queries the database for relevant results.
  4. Return the search results to the JavaScript code using XML or JSON format.
  5. Use JavaScript to display the search results on the web page.

In this article, I will demonstrate an example of a live search that displays search results as you type.

Use the input field below to find a “introduction to php” page to view:

There is an XML file (ajaxLinkExample.xml) that contains the results in the example above. The number of results in this example is limited to eight in order to make it small and simple.

Php Ajax Live Search Example

In the input field above, whenever the user enters a character, the function “showLinks()” gets executed and is displayed on the screen.

A onkeyup event is triggered when the user starts typing:

Example: 

<html><head> <script> function showLinks(str) { if (str.length == 0) { document.getElementById("search").innerHTML = ""; document.getElementById("search").style.border = "0px"; return; } var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 & this.status == 200) { document.getElementById("search").innerHTML = this.responseText; } }xmlhttp.open("GET", "getLinks.php?a=" + str, true); xmlhttp.send(); } </script> </head><body> <form> <input type="text" size="30" onkeyup="showLinks(this.value)"> <div id="search"></div> </form> </body></html>

Example Explanation

The function will exit if the input field is empty (str.length==0), which means that the placeholder will be cleared and the livesearch feature will not be activated.
The showLinks() function executes the following instructions if the form input field is not empty:
  • Create a new instance of XMLHttpRequest.
  • As soon as the server response is ready, create the function that will be used to execute the response.
  • The request will be sent to a file on the server in response to the request.
  • As you can see from the URL, a parameter (a) was added (which contains the content of the input field).

The PHP File

There is a PHP file called getLinks.php on the server which is called by JavaScript in the above example.

“getLinks.php” searches an XML file for titles that match the search string and submits them to the web server in the format that follows:

Example: 

<?php $xmlDoc = new DOMDocument(); $xmlDoc->load("links.xml"); $x = $xmlDoc->getElementsByTagName('link'); $a = $_GET["a"];if (strlen($a) > 0) { $hint = ""; for ($i = 0; $i < ($x->length); $i++) { $title = $x->item($i)->getElementsByTagName('title'); $url = $x->item($i)->getElementsByTagName('url'); if ($title->item(0)->nodeType == 1) { //find a link matching the search text if (stristr($title->item(0)->childNodes->item(0)->nodeValue, $a)) { if ($hint == "") { $hint = "<a href='" . $url->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" . $title->item(0)->childNodes->item(0)->nodeValue . "</a> "; } else { $hint = $hint . " <a href='" . $url->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" . $title->item(0)->childNodes->item(0)->nodeValue . "</a> "; } } } } }if ($hint == "") { $response = "no suggestion"; } else { $response = $hint; }echo $response; ?>

Example Explanation

In this PHP code, we are creating a new DOMDocument object and loading an XML file called “links.xml”. We are then getting all the link elements from the XML file using the getElementsByTagName method and storing them in the variable $x. We are also getting a parameter called “a” using $_GET[“a”].

If the length of the “a” parameter is greater than 0, we enter a loop that goes through each link element. For each link, we get its title and url elements using getElementsByTagName. If the title element contains a child node whose value matches the “a” parameter, we create an HTML link with the title element’s value and the url element’s value, and store it in the $hint variable.

If there are no matches, the $response variable is set to “no suggestion”. Otherwise, the $response variable is set to the value of $hint.

Finally, we echo the $response variable to display the search results on the page.

In short, this code searches through an XML file for links whose titles match a given search term and displays them as HTML links on the page.

  • Faster search results: With PHP AJAX live search, the search results are displayed in real-time as the user types. This provides a faster and more intuitive search experience for users.
  • Improved user experience: The live search feature improves the user experience by making it easier and faster for users to find the information they need.
  • Reduced server load: Because only relevant search results are returned, the server load is reduced, resulting in faster response times and improved server performance.

Conclusion

In conclusion, a PHP AJAX live search is a powerful tool that can greatly improve the search experience on your website.

By following the steps outlined in this article, you can easily create a PHP -AJAX live search for your website and provide your users with a more efficient and user-friendly search experience.

You can help others learn about the power and elasticity of PHP and AJAX by sharing our article on social media below. This will enable them to create dynamic and interactive web applications.

We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon
By subscribing, you agree with our privacy policy and our terms of service.

Leave a Reply

Your email address will not be published. Required fields are marked *