PHP development basic tutorial AJAX real-time search

# Ajax Real -time Search

## Ajax can provide users with a more friendly and interactive search experience.

# Examples

In the example below, we will demonstrate a real -time search. When you type the data .

Real-time search has many advantages over traditional search:
When data is entered, matching results will be displayed
As you continue typing data, filter the results
If there are too few results, delete characters to get a wider range

The output effect is shown on the right

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

This example includes three parts

HTML form page
##PHP file
XML file

HTML form page

Source code 1.php is as follows

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showResult(str)
{
	//如果输入框是空的（str.length==0），该函数会清空 livesearch 占位符的内容，并退出该函数
	if (str.length==0)
	{ 
		document.getElementById("livesearch").innerHTML="";
		document.getElementById("livesearch").style.border="0px";
		return;
	}
	//输入框不是空的，则showResult() 会执行以下代码
	//创建 XMLHttpRequest 对象
	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","2.php?q="+str,true);
	xmlhttp.send();
}
</script>
</head>
<body>
<!-- 键盘按键被松开时onkeyup 事件发生 ,调用showResult()函数-->
<form>
<p>在下面的文本框中输入 "HTML"，搜索包含 HTML 的页面：</p>
<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 content of the livesearch placeholder and exit the function.

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

Create an XMLHttpRequest object
Create Function executed when the server response is ready
Sends a request to a file on the server
Please note the parameter (q) added to the end of the URL (Including the content of the input box)

PHP file

The server called by JavaScript in the above paragraph The page is a PHP file named "2.php".

The source code in "2.php" will search the XML file for titles that match the search string and return the results:

See 2.php for the source code

<?php
//创建XML DOM对象
$xmlDoc=new DOMDocument();
//加载XML文件到新的XML DOM对象
$xmlDoc->load("3.xml");
//将标签名为“link”的对象的集合赋值给$x
$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)//元素的节点类型，1：元素节点，2：属性节点
		{
			// 找到匹配搜索的链接
			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 happens:

PHP creates an XML DOM object of the "links.xml" file
Traverse all <title> elements (nodetypes = 1) to find the text that matches the text passed by JavaScript
Find the link containing the correct title and set it For the "$response" variable, if more than one match is found, all matches are added to the variable.
If no match is found, set the $response variable to "no suggestion".
$response is the output sent to the "livesearch" placeholder

XML file

See 3.php

for the source code

<?xml version="1.0" encoding="UTF-8"?>
<pages>
<link>
<title>HTML a 标签</title>
<url>http://www.php.cn/tags/tag-a.html</url>
</link>
<link>
<title>HTML br 标签</title>
<url>http://www.php.cn/tags/tag-br.html</url>
</link>
<link>
<title>CSS background 属性</title>
<url>http://www.php.cn/cssref/css3-pr-background.html</url>
</link>
<link>
<title>CSS border 属性</title>
<url>http://www.php.cn/cssref/pr-border.html</url>
</link>
<link>
<title>JavaScript Date 对象</title>
<url>http://www.php.cn/jsref/jsref-obj-date.html</url>
</link>
<link>
<title>JavaScript Array 对象</title>
<url>http://www.php.cn/jsref/jsref-obj-array.html</url>
</link>
</pages>

Learning experience

This example mainly includes the following knowledge points:

Form basics
onkeyup Event: Occurs when the keyboard key is released
Function call, function value passing
Creation of AJAX XMLHttpRequest object, server response The function executed at the time, sends a request to the file on the server: see 1-5 for learning experience
HTML DOM getElementById() method: Returns the first object with the specified ID Quote
l XML related knowledge

Create XML DOM object

Load XML file to new XML DOM object
Get the object of a specific tag name: getElementsByTagName()
Get the child section collection of a specific element: HTML DOM childNodes
Get the node value of the first button element: HTML DOM nodeValue
Return the first child node of the element: HTML DOM item() method

Related functions:

Strlen(): Returns the length of the string
Stristr() : Search for the first occurrence of a string in another string

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function showResult(str) { //如果输入框是空的（str.length==0），该函数会清空 livesearch 占位符的内容，并退出该函数 if (str.length==0) { document.getElementById("livesearch").innerHTML=""; document.getElementById("livesearch").style.border="0px"; return; } //输入框不是空的，则showResult() 会执行以下代码 //创建 XMLHttpRequest 对象 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","2.php?q="+str,true); xmlhttp.send(); } </script> </head> <body>  <form> <p>在下面的文本框中输入 "HTML"，搜索包含 HTML 的页面：</p> <input type="text" size="30" onkeyup="showResult(this.value)"> <div id="livesearch"></div> </form> </body> </html>

submit Reset Code

Automatic operation

PHP development basic tutorial 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]