Home > Developer > Web Develop

PHP instance-AJAX real-time search

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

PHP Instance-AJAX Real-time search

AJAX provides users with a more user-friendly and interactive search experience.

AJAX Live Search

In the example below, we will demonstrate a real-time search that allows you to type data and get search results.

Real-time search has many advantages over traditional search:

    • When you type data, the matching results are displayed
    • Filter the results when you continue to type data
    • If the results are too small, delete the characters to get a wider range

Enter "HTML" in the text box below to search for pages that contain HTML:

The results from the above example are looked up in an XML file (links.xml). To make this example small and simple, we only provide 6 results.

Example explanation-HTML page

The "Showresult ()" function is executed when the user types a character in the input box above. This function is triggered by the "onkeyup" event:

<HTML><Head><Script>functionShowresult (str) {if(Str.length==0) {document.getElementById ("LiveSearch"). InnerHTML=""; document.getElementById ("LiveSearch"). Style.border="0px"; return; }    if(window. XMLHttpRequest) {//ie7+, Firefox, Chrome, Opera, Safari browser executionXMLHTTP=NewXMLHttpRequest (); }    Else    {//IE6, IE5 browser executionXMLHTTP=NewActiveXObject ("Microsoft.XMLHTTP"); } Xmlhttp.onreadystatechange=function()    {        if(Xmlhttp.readystate==4 &&Xmlhttp.status== $) {document.getElementById ("LiveSearch"). InnerHTML=Xmlhttp.responsetext; document.getElementById ("LiveSearch"). Style.border="1px solid #A5ACB2"; }} xmlhttp.open ("GET","livesearch.php?q="+str,true); Xmlhttp.send ();}</Script></Head><Body><form><inputtype= "text"size= "+"onkeyup= "Showresult (this.value)"><DivID= "LiveSearch"></Div></form></Body></HTML>

Source Code Explanation:

If the input box is empty (str.length==0), the function empties the contents of the LiveSearch placeholder and exits the function.

If the input box is not empty, then Showresult () performs the following steps:

    • Create a XMLHttpRequest Object
    • Create a function that executes when the server responds ready
    • Send a request to a file on the server
    • Note the parameter (q) added to the end of the URL (contains the contents of the input box)
PHP file

The above server page that was called by JavaScript is a php file named "livesearch.php".

The source code in "livesearch.php" searches for the title of the matching search string in the XML file and returns the result:

<?PHP$xmlDoc=NewDOMDocument ();$xmlDoc->load ("Links.xml");$x=$xmlDoc->getelementsbytagname (' link ');//get the value of the parameter Q from the URL$q=$_get["Q"];//find data from an XML file if the Q parameter existsif(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 to a matching search            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>"; }            }        }    }}//return "no suggestion" if not foundif($hint==""){    $response= "No Suggestion";}Else{    $response=$hint;}//Output ResultsEcho $response;?>

If JavaScript sends any text (that is, strlen ($q) > 0), it will occur:

    • Load an XML file into a new XML DOM object
    • Iterate through all the <title> elements to find the text that matches the JavaScript
    • Set the correct URL and caption in the $response variable. If more than one match is found, all matches will be added to the variable.
    • If no match is found, set the $response variable to "no suggestion".

PHP instance-AJAX real-time search

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
php real time project ajax whois domain search real time example of polymorphism in php search results php search search php php instance ajax php

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More