手册
目录
下例将演示实时搜索,即在您键入的同时获得搜索结果。
与传统搜索相比,实时搜索有许多优点:
请在下面的输入框中搜索 W3School 页面:
上例中的结果是在一个XML文件(links.xml)中找到的。为了使此例小而简单,只提供了六个结果。
当用户在上面的输入框中键入一个字符时,会执行 "showResult()" 函数。该函数由 "onkeyup" 事件触发:
如果输入框为空(str.length==0),则该函数会清除 livesearch 占位符的内容并退出函数。
如果输入框不为空,则 showResult() 函数将执行以下操作:
XMLHttpRequest 对象q)已添加到 URL 中(带有输入框的内容)JavaScript 调用的服务器页面是一个名为 "livesearch.php" 的 PHP 文件。
"livesearch.php" 中的源代码会在 XML 文件中搜索与搜索字符串匹配的标题,并返回结果:
load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
// 从 URL 获取 q 参数
$q=$_GET["q"];
// 如果 q 的长度大于 0,则从 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="" .
          $y->item(0)->childNodes->item(0)->nodeValue . "";
        } else {
          $hint=$hint . "
" .
          $y->item(0)->childNodes->item(0)->nodeValue . "";
        }
      }
    }
  }
}
// 如果没有找到提示,则将输出设置为“无建议”
// 或设置为正确的值
if ($hint=="") {
  $response="no suggestion";
} else {
  $response=$hint;
}
// 输出响应
echo $response;
?>
如果从 JavaScript 发送了任何文本(strlen($q) > 0),则会发生以下情况:
 元素,找到与从 JavaScript 发送的文本的匹配项。$response 变量中设置正确的 url 和标题。如果找到多个匹配项,则将所有匹配项添加到变量中。$response 变量设置为“无建议”。相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
							
							共5课时
17.2万人学习
							
							共49课时
77万人学习
							
							共29课时
61.7万人学习
							
							共25课时
39.3万人学习
							
							共43课时
70.9万人学习
							
							共25课时
61.6万人学习
							
							共22课时
23万人学习
							
							共28课时
33.9万人学习
							
							共89课时
125万人学习