php ajax autocomplete search
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (303.69 KB, 5 trang )
/>
Copyright © vietjack.com
AutoComplete Search với AJAX và PHP
Auto Complete Search là gì?
AutoComplete search box cung cấp các gợi ý khi bạn nhập dữ liệu vào trường. Tại đây, chúng ta
sử dụng XML để gọi các gợi ý Autocomplete này. Ví dụ dưới minh họa cách sử dụng Autocomplete
text box bởi sử dụng với PHP.
Index page
Index page nên là như sau:
<html>
<head>
<style>
div {
width:240px;
color:green;
}
</style>
<script>
function showResult(str) {
if (str.length==0) {
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else
Trang chia sẻ các bài học online miễn phí
Page 1
/>
Copyright © vietjack.com
{
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>
Enter Course Name
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
<a href="">More Details </a>
</form>
</body>
</html>
Tệp livesearch.php
Tệp này được sử dụng để gọi data từ xml file và nó sẽ gửi kết quả tới trình duyệt web.
Trang chia sẻ các bài học online miễn phí
Page 2
/>
Copyright © vietjack.com
$xmlDoc=new DOMDocument();
$xmlDoc->load("autocomplete.xml");
$x=$xmlDoc->getElementsByTagName('link');
$q=$_GET["q"];
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 . "
" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}
if ($hint=="") {
$response="Please enter a valid name";
Trang chia sẻ các bài học online miễn phí
Page 3
/>
Copyright © vietjack.com
}
else
{
$response=$hint;
}
echo $response;
?>
Tệp autocomplete.xml
File này chứa auto complete data và được truy cập bởi livesearch.php dựa trên trường title và url.
<link>
<title>android</title>
<url> /></link>
<link>
<title>Java</title>
<url> /></link>
<link>
<title>CSS </title>
<url> /></link>
<link>
<title>angularjs</title>
<url>http:/tutorialspoint.com/angularjs/index.htm </url>
</link>
<link>
Trang chia sẻ các bài học online miễn phí
Page 4
/>
Copyright © vietjack.com
<title>hadoop</title>
<url> </url>
</link>
<link>
<title>swift</title>
<url> </url>
</link>
<link>
<title>ruby</title>
<url> </url>
</link>
<link>
<title>nodejs</title>
<url> </url>
</link>
</pages>
Nó sẽ cho kết quả:
Trang chia sẻ các bài học online miễn phí
Page 5
