แจก!!! ใช้งาน Autocomplete ร่วมกับฐานข้อมูล ตัวอย่าง Autocomplete จังหวัดในไทย

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

Download


เมื่อ Download เสร็จแล้วจะได้ไฟล์เหมือนในรูป โดยไฟล์ จะมีทั้งตัวอย่างฐานข้อมูล และไฟล์ตัวอย่างการใช้งาน Autocomplete ร่วมกับ Database ดังรูป

---

ตัวอย่างการใช้งาน Text Autocomplete

ในการยกตัวอย่างการใช้งาน ผมจะขอนำเสนอในรูปแบบของการทำ Autocomplete รายชื่อจังหวัดของประเทศไทย (ลองใช้งานได้ ในกรอบด้านล่าง)

---

ตัวอย่างการใช้งาน Text Autocomplete ร่วมกับ Database

เริ่มที่ เรียกใช้งาน StyleSheet และ Javascript ใน Tag <header>....</header>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="./inc/demo.css">
<link rel="stylesheet" href="inc/jquery.autocomplete.css">
<script src="./inc/jquery.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="inc/jquery.autocomplete.js" type="text/javascript"></script>

เชื่อมต่อฐานข้อมูลและดึงข้อมูลจากจังหวัดจากฐานข้อมูลออกมาแสดง จากตัวอย่างด้านล่าง เราจะเก็บชื่อจังหวัดที่

$connect = mysqli_connect('localhost', 'root', '1234', 'test');
mysqli_set_charset($connect, 'utf8');

/************************ ดึงข้อมูลจังหวัดจากฐานข้อมูล *********************/
$sql = "SELECT
pv.name_th
FROM
province AS pv
ORDER BY
CONVERT( pv.name_th USING tis620 ) ASC";
$result = mysqli_query($connect, $sql);
$php_list = '';
foreach ($result as $key => $val){
    $php_list .= "'".$val['name_th']."', ";
}
/********** เก็บค่ารายชื่อจังหวัดทั้งหมดไว้ในตัวแปร ********/
$php_list = substr($php_list,0, strlen($php_list) - 2);

ส่วนฝั่งของ HTML สร้าง Input field ที่ต้องการทำให้เป็น Autocomplete พร้อมกำหนด id ให้กับ Input นั้น เช่น id="province_auto"

<div class="auto" style="padding: 25px; width: 400px;">
<div class="form-group" style="margin:0px;">
<strong>กรอกจังหวัด</strong>
<input type="text" class="form-control" id="province_auto" placeholder="กรอกจังหวัด">
</div>
</div>

ในส่วนของ Script กำหนดค่าตัวแปร province เป็นรายชื่อจังหวัดจากนั้นเรียกใช้งานผ่าน jQuery ด้วยคำสั่ง .autocomplete

<script>
    var province = [<?php echo $php_list?>];

    $('#province_auto').autocomplete({
        source:[province],
        limit: 10
    });
</script>

ขอบคุณความรู้ดี ๆ จาก https://xdsoft.net/