AJAX real-time search

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

AJAX Live Search

In the following example, we will demonstrate a real-time search that can be obtained while you type the data. search results.

Real-time search has many advantages over traditional search:

1. When you type in data, matching results will be displayed

2. When continuing When typing data, filter the results

3. If there are too few results, delete characters to get a wider range

Enter "HTML" in the text box below to search for HTML Page:

##The results in the above example are in an XML file (links.xml) Search in . To keep this example small and simple, we only provide 6 results.

Explanation of examples - HTML page

When the user types characters in the input box above, the "showResult()" function will be executed. This 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;
}
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行
xmlhttp=new XMLHttpRequest();
}
else
{// 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","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 box is empty (str.length==0), this function will Clear the contents of the livesearch placeholder and exit the function.

If the input box is not empty, then showResult() will perform the following steps:

1. Create an XMLHttpRequest object

2. Create a function that is executed when the server response is ready

3. Send a request to the file on the server

4. Please pay attention to the parameter (q) added to the end of the URL (contains the content of the input box)

PHP file

The server page called above through JavaScript is a PHP file named "livesearch.php".

The source code in "livesearch.php" searches the XML file for titles that match the search string and returns the results:

<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
// 从 URL 中获取参数 q 的值
$q=$_GET["q"];
// 如果 q 参数存在则从 xml 文件中查找数据
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)
{
// 找到匹配搜索的链接
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>";
}
}
}
}
}
// 如果没找到则返回 "no suggestion"
if ($hint=="")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
// 输出结果
echo $response;
?>

If JavaScript sends any text (i.e. strlen($q ) > 0), what will happen:

1) Load the XML file into a new XML DOM object

2) Traverse all <title> elements to find a match passed by JavaScript Text

3) Set the correct URL and title in the "$response" variable. If more than one match is found, all matches are added to the variable.

4) If no match is found, set the $response variable to "no suggestion".

Continuing Learning

new file

<?php // 需要与前面的HTML文件联合使用 $xmlDoc=new DOMDocument(); $xmlDoc->load("links.xml"); $x=$xmlDoc->getElementsByTagName('link'); // 从 URL 中获取参数 q 的值 $q=$_GET["q"]; // 如果 q 参数存在则从 xml 文件中查找数据 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) { // 找到匹配搜索的链接 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>"; } } } } } // 如果没找到则返回 "no suggestion" if ($hint=="") { $response="no suggestion"; } else { $response=$hint; } // 输出结果 echo $response; ?>

submit Reset Code

Automatic operation

AJAX real-time search

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]