AJAX 실시간 검색

AJAX는 사용자에게 더욱 친근하고 대화형 검색 환경을 제공합니다.

AJAX 실시간 검색

다음 예에서는 실시간 검색을 시연하며, 데이터를 입력하는 동안 검색 결과를 얻을 수 있습니다.

실시간 검색은 기존 검색에 비해 많은 장점이 있습니다.

데이터를 입력하면 일치하는 결과가 표시됩니다.
계속 입력하면서 결과를 필터링하세요.
결과가 너무 적으면 문자를 삭제하여 더 넓은 범위를 확인하세요.

"HTML 입력 "를 아래 텍스트 상자에 입력하여 HTML이 포함된 페이지를 검색합니다.

위 예의 결과는 XML 파일(links.xml)에서 찾을 수 있습니다. 이 예제를 작고 단순하게 유지하기 위해 6개의 결과만 제공합니다.

예제 설명 - HTML 페이지

위 입력창에 사용자가 문자를 입력하면 "showResult()" 함수가 실행됩니다. 이 함수는 "onkeyup" 이벤트에 의해 실행됩니다:

<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>

소스 코드 설명:

입력 상자가 비어 있는 경우(str.length) == 0), 이 함수는 실시간 검색 자리 표시자의 내용을 지우고 기능을 종료합니다.

입력 상자가 비어 있지 않으면 showResult()는 다음 단계를 수행합니다.

XMLHttpRequest 객체 생성
Create 함수는 서버 응답이 준비되었을 때 실행됩니다.
서버의 파일에 요청을 보냅니다.
추가된 매개변수(q)에 유의하세요. URL 끝까지 (입력란 내용 포함)

PHP 파일

위에서 JavaScript를 통해 호출되는 서버 페이지는 이라는 PHP 파일입니다. "livesearch.php" .

"livesearch.php"의 소스 코드는 XML 파일에서 검색 문자열과 일치하는 제목을 검색하고 결과를 반환합니다.

<?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;
?>

JavaScript는 임의의 텍스트(예: strlen($q) > 0)를 보내면 다음과 같은 일이 발생합니다.

XML 파일을 새 XML DOM 객체로 로드합니다.
모든 <title> 요소를 반복하여 JavaScript가 전달한 텍스트와 일치하는 요소를 찾습니다.
"$response" 변수에 올바른 URL과 제목을 설정하세요. 일치하는 항목이 두 개 이상 발견되면 모든 일치 항목이 변수에 추가됩니다.
일치하는 항목이 없으면 $response 변수를 "제안 없음"으로 설정합니다.

추천 비디오 튜토리얼: "AJAX 튜토리얼"http://www.php.cn/course/list/ 25 .html

AJAX 실시간 검색