AJAX can be used to create more user-friendly and interactive searches.
AJAX Live Search
The following example will demonstrate a live search, where you get search results while you type.
Live search has many benefits compared to traditional searching:
- Results are shown as you type
- Results narrow as you continue typing
- If results become too narrow, remove characters to see a broader result
Search for a Mytoptutorials page in the input field below:
The results in the example above are found in an XML file (links.xml). To make this example small and simple, only six results are available.
AJAX Live Search Example – The HTML Page
When a user types a character in the input field above, the function "showResult()" is executed. The function is triggered by the "onkeyup" event:
Source code explanation:
If the input field is empty (str.length==0), the function clears the content of the livesearch placeholder and exits the function.
If the input field is not empty, the showResult() function executes the following:
- Create an XMLHttpRequest object
- Create the function to be executed when the server response is ready
- Send the request off to a file on the server
- Notice that a parameter (q) is added to the URL (with the content of the input field)
AJAX Live Search The PHP File
The source code in "livesearch.php" searches an XML file for titles matching the search string and returns the result:
//get the q parameter from URL
//lookup all links from the xml file if length of q>0
// Set output to "no suggestion" if no hint were found
//output the response
- Load an XML file into a new XML DOM object
- Sets the correct url and title in the "$response" variable. If more than one match is found, all matches are added to the variable
- If no matches are found, the $response variable is set to "no suggestion"