Listings
PHP Example - AJAX Live Search
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 W3Schools 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.
Example Explained - 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:
<html>
<head>
<script>
function showResult(str) {
if (str.length==0) {
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("livesearch").innerHTML=this.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
</body>
</html>
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)
The PHP File
The page on the server called by the JavaScript above is a PHP file called "livesearch.php".
The source code in "livesearch.php" searches an XML file for titles matching the search string and returns the result:
<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//get the q parameter from URL
$q=$_GET["q"];
//lookup all links from the xml file if length of q>0
if (strlen($q)>0) {
$hint="";
for($i=0; $i<($x->length); $i++) {
$y=$x->item($i)->getElementsByTagName('title');
$z=$x->item($i)->getElementsByTagName('url');
if ($y->item(0)->nodeType==1) {
//find a link matching the search text
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) {
if ($hint=="") {
$hint="<a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
} else {
$hint=$hint . "<br /><a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}
// Set output to "no suggestion" if no hint was found
// or to the correct values
if ($hint=="") {
$response="no suggestion";
} else {
$response=$hint;
}
//output the response
echo $response;
?>
If there is any text sent from the JavaScript (strlen($q) > 0), the following happens:
- Load an XML file into a new XML DOM object
- Loop through all <title> elements to find matches from the text sent from the JavaScript
- 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"
Views: 289 / Downloads: 606 | Price: $0 | Ajax / Ajax Tutorials
Status: Active
|
You have no Listings. Create Listing.
Price: $3,500 
Free Tools
- Submit Software/Code
Sitemap Generator-
NameServer Lookup (NS) -
( SERP )Search Engine Ranking Position checker 
PHP Form Generator
Generate custom email forms.-
Domain (WHOIS) Lookup Check all domain information, exp date, owner,address. 
Meta Tags Generator Generate All meta tags and get ranked high on Search engines.. 
CPM Advertising Calculator Calculate and estimate your CPM / CPA / CPC.. 
CSS 3 Color Chart View all Known Colors and Their Css Atribute. Ex. #0099FF
FavIcon Generator Generate your own Favicon in seconds. Then Just Place the image.
Table Generator Generate
Tables just clicking the buttons
+ its Copy and Paste.
Dev's Tips
Dev: Ramon Sanchez
TIP: # 251 | Meta Tags
When addingMETA TAGSmake sure you dont over Repeat thekeywordsit wont help with SEO. Keep it Simple dont overdue it...
Contact Developer
Website Ranking Tools
Help you analyze and improve your Website rankings!
Google Rank Checker Check website Google rank.- Website search engine position
Check website position on search. - Search Engine Optimization Tools - Check how search engines see your Website !
- Search Engine Listing Preview Preview what your site's listing will look like.
- Website Resolution Viewer - View your website at a variety of common resolutions.
- Text Website Viewer
View your website in text-only mode, just as the search engines see it. - XHTML Website Source Tools - Check how search engines see's and affect your Website !
Source Code Viewer
View the source code of a website.- MD5 Encrypter
Encrypt text with MD5 encoding. - HTML Encrypter Encrypt your HTML code to hide it from visitors.
- Website Speed Test Check the loading speed of your site.
- Website owner Lookup See the Domain information and who is it registered to.
- Optimize Html Code Optimize your HTML Source code.
- Other Misc Website Tools - Check how search engines see and affect your Website.
- Website Status analyzer Analyze whether all the five major ports are responding back.
- TXT List Cleaner Clean and remove duplicates from a text list.
Javascript Hit Counter Copy and paste Javascript code to your website and create a web counter.
Browser Details Tool - View your IP address and your browser details.- Send Anonymous Email's.Allows the sending of anonymous e-mails.
- E-mail Image Generator Create an image of your e-mail address to prevent harvesting.