วิธีทำ Textbox Autocomplete จากฐานข้อมูล ด้วย jQuery Ajax

Spread the love

จำนวนผู้เข้าชม : 372

สวัสดีจ้าเพื่อน ๆ ใครกำลังมาหาวิธีการทำ Textbox autocomplte หรือ Dropdown autocomplete กันอยู่หรือเปล่า ที่จริงแล้ว ดูเพลิน เรามีแจกนะ นอกจากนี้เรายังมีตัวอย่าง การเขียนโค้ดโดยใช้งาน Javascript function และ Jquery Ajax อัพเดท option อัตโนมัติมาให้เพื่อน ๆ ได้ Download ไปใช้กันอีกด้วย

ตัวอย่างการเขียนโค้ด Textbox และ Listbox Autocomplete แบบอัตโนมัติด้วย jQuery Ajax

โค้ดตัวอย่างโค้ดที่คุณได้ Download มานั้นเป็นภาษา PHP แต่ไม่ต้องกังวลไป เพราะเรามี SQL ตัวอย่างให้กับคุณแล้ว เพียงแต่คุณเปลี่ยนรูปแบบการดึงข้อมูลจากภาษา PHP เป็นภาษาที่คุณต้องการ นอกจากนี้ โค้ดสำหรับสร้าง Textbox และ Dropdown ทั้งหมดก็เป็น Javascript และ HTML

ไฟล์ชุดนี้ ใช้สำหรับคุม Autocomplete ทั้งของ Textbox และของ Dropdown

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.css" rel="stylesheet" />
<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>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

ตัวอย่างโค้ด SQL สำหรับดึงข้อมูลจากฐาข้อมูล

/************************ ตัวอย่างการดึงข้อมูลจาก Database *********************/
$sql = "SELECT
t1.`code`,
t1.name_th
FROM
province AS t1
ORDER BY CONVERT (t1.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="form-group">
    <strong>กรอกจังหวัด: (Inputbox/Textbox)</strong>
    <input type="text" class="form-control" id="province_auto" placeholder="กรอกจังหวัด">
</div>

ตัวอย่าง HTML การสร้าง Listbox ที่ต้องการทำให้เป็น Autocomplete ด้วยการกำหนด id ให้กับ Selectbox นั้น เช่น id="province_listbox"

<div class="form-group" style="margin:0;">
    <strong>เลือกจังหวัด: (Listbox/Selectbox)</strong>
    <select class="form-control" placeholder="จังหวัด" name="province" id="province_listbox" >
        <?php
        foreach ($result as $key => $val){
            echo '<option value="'.$val['code'].'">'.$val['name_th'].'</option>';
        }
        ?>
    </select>
</div>

ตัวอย่างของส่วน Script กำหนดค่าตัวแปร province เป็นรายชื่อจังหวัด (ที่ดึงมาจากฐานข้อมูลตามตัวอย่างด้านบน) จากนั้นเรียกใช้งานผ่าน jQuery ด้วยคำสั่ง

$(ID).autocomplete() สำหรับสร้าง Textbox Autocomplete
$(ID).select2() สำหรับสร้าง Listbox Autocomplete

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

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

เป็นยังไงกันบ้างคะ ไม่ยากเลยใช่ไหมละสำหรับบทความเรื่อง วิธีทำ Textbox Autocomplete จากฐานข้อมูล ด้วย jQuery Ajax ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย