Auto Suggestion คือฟีเจอร์ที่ช่วยแสดงคำแนะนำอัตโนมัติ
เมื่อผู้ใช้เริ่มพิมพ์ข้อมูลลงในช่องค้นหา
เช่น การค้นหาสินค้า การค้นหาชื่อลูกค้า หรือการค้นหาข้อมูลในระบบ

เมื่อผู้ใช้พิมพ์ข้อความ ระบบจะส่งคำค้นหาไปยัง Server
แล้วดึงข้อมูลที่ตรงกับคำค้นหากลับมาแสดงเป็นรายการ

โครงสร้าง HTML

<input type="text" id="search" placeholder="ค้นหาข้อมูล">
<div id="result"></div>

การโหลด jQuery

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

การเขียน jQuery สำหรับ Auto Suggestion

$(document).ready(function(){
   $("#search").keyup(function(){
       var keyword = $(this).val();
       if(keyword != ""){
           $.ajax({
               url: "search.php",
               method: "POST",
               data: {keyword: keyword},
               success:function(data){
                   $("#result").html(data);
               }
           });
       }else{
           $("#result").html("");
       }
   });
});

ตัวอย่างไฟล์ search.php

ไฟล์นี้จะรับค่าคำค้นหา และค้นหาข้อมูลจากฐานข้อมูล

<?php
$conn = new mysqli("localhost","root","","testdb");
$keyword = $_POST['keyword'];
$sql = "SELECT name FROM products 
       WHERE name LIKE '%$keyword%' 
       LIMIT 5";
$result = $conn->query($sql);
while($row = $result->fetch_assoc()){
   echo "<div class='item'>".$row['name']."</div>";
}
?>

การตกแต่ง CSS

#result{
   border:1px solid #ccc;
   width:200px;
}
.item{
   padding:8px;
   cursor:pointer;
}
.item:hover{
   background:#f0f0f0;
}

ตัวอย่างการทำงาน

• ผู้ใช้เริ่มพิมพ์คำค้นหา


• jQuery ส่งคำค้นหาไปยัง Server ผ่าน AJAX


• Server ค้นหาข้อมูลจาก Database


• ผลลัพธ์ถูกส่งกลับมาแสดงเป็นรายการคำแนะนำ

สรุป

Auto Suggestion ด้วย jQuery เป็นเทคนิคที่ช่วยเพิ่มความสะดวกในการค้นหาข้อมูล
โดยระบบจะเสนอคำที่เกี่ยวข้องทันทีที่ผู้ใช้เริ่มพิมพ์
ซึ่งนิยมใช้ในระบบค้นหาสินค้า ระบบลูกค้า หรือระบบจัดการข้อมูลต่าง ๆ