How to Search as You Type on AJAX With PHP MySQL

The "live search" feature on a Web page uses Ajax to send a query to PHP to display search possibilities. You use your PHP processing page for the search and set up the trigger to run when the user presses a key in the search text box. Ajax is an asynchronous language, so you do not need to refresh the page each time the user presses a key for a search result.

Instructions

1. Open your preferred JavaScript, Ajax or HTML editor. Open the Web page that contains your search text box.

2. Create the Ajax search function that points to your PHP processing page:

   function find(str)
   {
   search=new XMLHttpRequest();
   search.open("GET","livesearch.php?q="+str,true);
   search.send();
   }

3. Link the input text box for your search to the "find" function created in JavaScript. The following code is an example of a text box linked to the "find" function:

   <input type="text" size="30" onkeyup="find(this.value)" />

   The function triggers only when the user presses a key. The keys pressed are passed to the function.

4. Create a "div" contain to display the results:

   <div id="livesearch"></div>

References

• W3Schools: PHP Example - AJAX Live Search