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

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

คลิกที่นี่ เพื่อ Download source code

หลังจาก Download code มาแล้ว คุณจะได้ไฟล์ออกแบบแบบนี้

ตัวอย่าง Textbox Autocomplete ใช้งานร่วมกับ jQuery Ajax

ตัวอย่าง Listbox Autocomplete ใช้งานร่วมกับ jQuery Ajax

ตัวอย่างการเขียนโค้ด 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 ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย

เทคนิคอื่นๆ เกี่ยวกับการเขียนโค้ด คลิก

อย่าลืมไปติดตาม Facebook fanpage ของเรา >> Click <<

หมวดหมู่เกี่ยวกับ Coding

เนื้อหาที่คล้ายกัน...

แจกฐานข้อมูล จังหวัด อำเภอ ตำบล และ Dropdown jQuery Ajax

แจกฐานข้อมูล จังหวัด อำเภอ ตำบล และ Dropdown jQuery Ajax

ดูเพลิน Admin - 23 ธ.ค. 65
Code script เช็คเลขบัตรประชาชน แบบ Real-time

Code script เช็คเลขบัตรประชาชน แบบ Real-time

ดูเพลิน Admin - 21 ธ.ค. 65
Code script ตรวจสอบรูปแบบ URL pattern แบบ Real-time

Code script ตรวจสอบรูปแบบ URL pattern แบบ Real-time

ดูเพลิน Admin - 28 ธ.ค. 65
เทคนิค วิธีการ Set Delay ให้กับ Function Javascript

เทคนิค วิธีการ Set Delay ให้กับ Function Javascript

ดูเพลิน Admin - 26 ม.ค. 66
ทำ Search Table การ Filter ซ่อน/แสดง row เมื่อกรอก Textbox

ทำ Search Table การ Filter ซ่อน/แสดง row เมื่อกรอก Textbox

ดูเพลิน Admin - 23 ม.ค. 66
Code script ตรวจสอบรูปแบบ Email pattern แบบ Real-time

Code script ตรวจสอบรูปแบบ Email pattern แบบ Real-time

ดูเพลิน Admin - 28 ธ.ค. 65
Javascript เปิด/ปิด ซ่อน/แสดง Element โดยใช้ jQuery แบบต่างๆ

Javascript เปิด/ปิด ซ่อน/แสดง Element โดยใช้ jQuery แบบต่างๆ

ดูเพลิน Admin - 11 ม.ค. 66
Bootstrap datepicker thai วิธีทำ datepicker php ภาษาไทย

Bootstrap datepicker thai วิธีทำ datepicker php ภาษาไทย

ดูเพลิน Admin - 21 ธ.ค. 65

เรื่องราวเอื่น ๆ ในหมวดเทคนิคการเขียนโค้ด...

let value = 147/32; let result_value = Math.round(value); console.info('Value = '+value+' Result = '+result_value); //ผลลัพธ์ Value = 4.59 Result = 5let value = 147/33; let result_value = Math.round(value); console.info('Value = '+value+' Result = '+result_value); //ผลลัพธ์ Value = 4.454 Result = 4