AJAX 실시간 검색

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

AJAX 실시간 검색

아래 예시에서는 검색을 입력하는 동안 얻을 수 있는 실시간 검색을 보여드리겠습니다. 결과.

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

1. 데이터를 입력하면 일치하는 결과가 표시됩니다.

2. 계속해서 데이터를 입력할 때, 결과 필터링

3. 결과가 너무 적으면 문자를 삭제하여 범위를 넓힙니다.

HTML을 검색하려면 아래 텍스트 상자에 "HTML"을 입력하세요. 페이지:

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

예제 설명 - HTML 페이지

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

소스 코드 설명:

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

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

1. XMLHttpRequest 객체를 생성합니다.

2. 서버 응답이 준비되면

3. 서버의 파일에 요청을 보냅니다

4. URL 끝에 추가된 매개변수(q)에 유의하세요( 입력창)

PHP 파일

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

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

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="" . $y->item(0)->childNodes->item(0)->nodeValue . ""; } else { $hint=$hint . "
" . $y->item(0)->childNodes->item(0)->nodeValue . ""; } } } } } // 如果没找到则返回 "no suggestion" if ($hint=="") { $response="no suggestion"; } else { $response=$hint; } // 输出结果 echo $response; ?>

JavaScript가 텍스트를 보내는 경우(예: strlen($q ) > 0), 어떻게 될까요?

1) XML 파일을 새 XML DOM 개체에 로드합니다.

2) 모든