ขอบคุณค่ะ ทำได้แล้วนะคะ
โดยที่ หน้า HTML
โค้ด: เลือกทั้งหมด
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <!-- เรียกใช้ css ของ autocomplete -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script> <!-- เรียกใช้ jquery ถ้ามีอยู่แล้วไม่ต้องเรียกซ้ำ -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <!-- เรียกใช้ฟังกชั่น ่jquery ของตัว Widgets ซึ่งมี autocomplete ให้เรียกใช้ -->
<script>
jQuery(function ($) {
$("#keywords").keyup(function () {
let searchText = $(this).val(); //เรียกคำที่พิมพ์ในช่องค้นหา
if (searchText != "") {
$.ajax({
url: "{URL}", //URL ของ ajax ที่ค้นหาคำและ return ผลลัพท์ออกมา
method: "post",
data: {
query: searchText,
},
success: function (response) { //ถ้ามีคำ เอา response มาใส่ส่วน autocomplete ตรงนี้
$( "#keywords" ).autocomplete({
source: response
});
},
});
}
});
});
</script>
<input name="keywords" id="keywords" type="search" maxlength="128" />
ปรับแต่ง CSS ตัวอักษรกับเส้นใต้ และสีตอนเลือกจากที่ jquery-ui.css มีอยู่
โค้ด: เลือกทั้งหมด
/*ส่วน dropdown*/
.ui-menu .ui-menu-item {
height: 40px;
border-bottom:1px solid #EAEAEA;
line-height: 2;
font-family: 'Kanit', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
}
/*เวลาเลือกค่าใน dropdown ให้เป็นสีเทา */
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
background-color: #DADADA;
}
ผลลัพท์ที่ได้ :
- Screenshot from 2023-04-24 13-04-56.png (8.03 KiB) Viewed 4700 times