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:


   
      
      
      
      
      
   
   
      
      
         Nhập tên khóa học
         
         
         Chi tiết khóa học

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.

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="" . 
                  $y->item(0)->childNodes->item(0)->nodeValue . "";
               }
               else 
               {
                  $hint=$hint . "
" . 
                  $y->item(0)->childNodes->item(0)->nodeValue . "";
               }
            }
         }
      }
   }
	
   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.

   
      Android
      https://hoconline.club/android/
      
      Java
      https://hoconline.club/java/
      
      CSS 
      https://hoconline.club/css/
      
      Angularjs
      http:/hoconline.club/angularjs/ 
      
      PHP
      https://hoconline.club/php/ 
      
      Python
      https://hoconline.club/python/ 
      
      Ajax
      https://hoconline.club/ajax/ 
      
      nodejs
      https://hoconline.club/nodejs/

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ài học PHP phổ biến khác tại VietJack:

Trang trước

Trang sau