How To Create Live Ajax & PHP Search Engine For XML Sitemap File

Share:

How To Create Live Ajax & PHP Search Engine For XML Sitemap File. You must already know Google search engine and maybe you find this blog of these search engine. Regarding Google search, there are unique from this search engine. When you type in a keyword in the search box to quickly search results will appear without the page is loaded even without clicking the submit button, the search results will appear automatically.
How To Create Live Ajax & PHP Search Engine For XML Sitemap FileHere, we will discuss how to create a live search like google search. What we need is Ajax and PHP scripts. Just a reminder, in the previous tutorial we have discussed how to create a PHP search for MySQL database table, because it is in this tutorial we will try to make a live Ajax and PHP search for xml sitemap. These scripts can later be implemented on your website and blog that has an xml file. Immediately, following the full tutorial :

Download now How To Create Live Ajax PHP Search Engine XML Sitemap File

How To Create Live Ajax PHP Search Engine XML Sitemap File

Create A HTML Form
Whose name search engines will definitely need a html form to get the keywords to be searched. Here’s a simple html form to live this live search engine :

<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>

Create A PHP Script
To make artificial search engines can read and process the XML file, then use the simplexml_load_file() function. What about the script ? see below …

<?php
$q=$_GET["q"];
$xml=simplexml_load_file("http://tutorial.world.edu/feed/");
foreach ($xml->channel->item as $item) {
    $title = (string) $item->title; // Title Post
    $link   = (string) $item->link; // Url Link	
$strpos = strpos($title, $q);
if($strpos == TRUE){
echo "<a href='".$link;
echo "'>";
echo $title;
echo "</a><br/>";	
}
}
?>

The script above same as script we use to display RSS feed and blogs sitemap of a website. If you want to create a search engine to your blog, so just change the above url with the url of your sitemap file.

In addition, the above script can actually be used to process the request, but is very sensitive. Words written with lowercase and uppercase letters are different as follows :
ajax search, Ajax Search, AJAX SEARCH, AjaX searCH and other …
have the same meaning but you indulge these search engines is very sensitive so if done with keyword search is ajax search. There will be no results are shown, albeit in a blog post title that is written using letters, Ajax Search.

To overcome this, we can add the PHP strtoupper() or PHP strtolower() to match existing words in the keyword search and the title sitemap. So, the above script will be like below and save the file name :
ajax-php-search.php

<?php
$q=$_GET["q"];
$keyword=strtoupper($q);
$xml=simplexml_load_file("http://tutorial.world.edu/feed/");
foreach ($xml->channel->item as $item) {
    $title = (string) $item->title; // Title Post
    $link   = (string) $item->link; // Url Link
$title2=strtoupper($title);	
$strpos = strpos($title2, $keyword);
if($strpos == TRUE){
echo "<a href='".$link;
echo "'>";
echo $title;
echo "</a><br/>";	
}
}
?>

Create A Ajax Script
Finish create a PHP script for the XML sitemap file is searched, the next step is to create an ajax search that will be used to display results search live.

<script>
function showResult(str)
{
if (str.length==0)
  {
  document.getElementById("livesearch").innerHTML="";
  document.getElementById("livesearch").style.border="0px";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
    document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    }
  }
xmlhttp.open("GET","ajax-php-search.php?q="+str,true);
xmlhttp.send();
}
</script>

Save the script Ajax between <head> and </head>.

In addition, the following is a page containing the full script :

<html>
<head>
<title> How To Create Live Ajax & PHP Search Engine For XML Sitemap File | Tutorial.World.Edu </title>
<script>
function showResult(str)
{
if (str.length==0)
  {
  document.getElementById("livesearch").innerHTML="";
  document.getElementById("livesearch").style.border="0px";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
    document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    }
  }
xmlhttp.open("GET","ajax-php-search.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
<p><a href="http://tutorial.world.edu/web-development/how-to-create-live-ajax-php-search-engine-xml-sitemap-file/">Live Ajax Search for XML File</a> by <a href="http://tutorial.world.edu">Tutorial.World.Edu</a></p>
</body>
</html> 

The result of live ajax search :
live-ajax-search.php
How To Create Live Ajax & PHP Search Engine For XML Sitemap FileThis tutorial only discusses the script to create a live search engine for xml sitemap file. If it looks less attractive, of course you can beautify them with a few touches of the CSS code Or more simply, you can use the CSS search box at the post : How To Create CSS Search Box Form Design.
Thanks for reading How To Create Live Ajax & PHP Search Engine For XML Sitemap File

[Tutorial.World.Edu]

Leave a Reply

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