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: ...
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 {
awidth: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
{
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>
<h2>Nhập tên khóa học</h2>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
<a href="https://vietjack.com">Chi tiết khóa học </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.
<?php
$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 . "<br/><a href='" .
$z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}
if ($hint=="") {
$response="Mời bạn nhập một tên hợp lệ";
}
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.
<pages>
<link>
<title>Android</title>
<url>https://vietjack.com/android/index.jsp</url>
</link>
<link>
<title>Java</title>
<url>https://vietjack.com/java/index.jsp</url>
</link>
<link>
<title>CSS </title>
<url>https://vietjack.com/css/index.jsp</url>
</link>
<link>
<title>Angularjs</title>
<url>http:/vietjack.com/angularjs/index.jsp </url>
</link>
<link>
<title>PHP</title>
<url>https://vietjack.com/php/index.jsp </url>
</link>
<link>
<title>Python</title>
<url>https://vietjack.com/python/index.jsp </url>
</link>
<link>
<title>Ajax</title>
<url>https://vietjack.com/ajax/index.jsp </url>
</link>
<link>
<title>nodejs</title>
<url>https://vietjack.com/nodejs/index.jsp </url>
</link>
</pages>
Lưu chương trình trên trong một file có tên là test.php trong htdocs, sau đó mở trình duyệt và gõ địa chỉ http://localhost:8080/test.php sẽ cho kết quả:
Các bạn ở Hà Nội có thể tham gia khóa học thứ 8 của vietjackteam (đang tuyển sinh) vào đầu tháng 08/2018 do anh Nguyễn Thanh Tuyền, admin vietjack.com trực tiếp giảng dạy tại Hà Nội. Chi tiết nội dung khóa học tham khỏa link : Khóa học Java.Các bạn học CNTT, điện tử viễn thông, đa phương tiện, điện-điện tử, toán tin có thể theo học khóa này. Số lượng các công việc Java hoặc .NET luôn gấp ít nhất 3 lần Android hoặc iOS trên thị trường tuyển dụng. Khóa online= Đi phỏng vấn, Khóa offline= Đi phỏng vấn+ 1.5 tháng thực tập ngoài doanh nghiệp.
Mọi người có thể xem demo nội dung khóa học tại địa chỉ Video demo khóa học Offline
Các bạn ở xa học không có điều kiện thời gian có thể tham dự khóa Java online để chủ động cho việc học tập. Từ tháng 4/2018, code24h khuyến mại giá SỐC chỉ còn 250k cho khóa học, các bạn có thể trả lại tiền nếu không hài lòng về chất lượng trong 1 tháng, liên hệ facebook admin fb.com/tuyen.vietjack để thanh toán chuyển khoản hoặc thẻ điện thoại, khóa học bằng Tiếng Việt với gần 100 video, các bạn có thể chủ động bất cứ lúc nào, và xem mãi mãi. Thông tin khóa học tại Khóa học Java Online trên Udemy
Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Các bài học PHP phổ biến khác tại code24h:
