Typeahead ทำ Autocomplete บน Booststap

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
M004
PHP VIP Members
PHP VIP Members
Posts: 1323
Joined: 01/01/1970 7:00 am

Typeahead ทำ Autocomplete บน Booststap

Post by M004 » 14/08/2013 11:27 am

Typeahead ทำ Autocomplete บน Booststap
สำหรับตัวอย่างนี้ Typeahead จะทำงานร่วมกับ Ajax เมือกรอกข้อมูล ลงใน Textbox ระบบTypeahead จะนำข้อมูลที่เกี่ยวข้อง จาก database มา แสดง
ตัวอย่าง
ข้อมูลใน database
4.png
4.png (7.37 KiB) Viewed 1027 times
เมือกรอก O ข้อมูลที่เกี่ยวข้องกับ O ก็จะแสดงออกมา
1.png
1.png (15.42 KiB) Viewed 1027 times
เมือกรอก no ข้อมูลที่เกี่ยวข้องกับ no ก็จะแสดงออกมา
2.png
2.png (13.58 KiB) Viewed 1027 times

สำหรับวิธีใช้งานนั้นเริ่มจาก
แทรก bootstrap-typeahead.js / bootstrap.js / jquery.min.js ลงใน html
แทรก script ดังต่อไปนี้

Code: Select all

    <script type="text/javascript">
    jQuery(document).ready(function(){

            jQuery('#wordtest').typeahead({
                            ajax : 'ajax.php',
                            });

    });
    </script>
Textbox สำหรับกรอกข้อมูล

Code: Select all

<input type="text" class="span3" id="wordtest" name="wordtest"  data-provide="typeahead">
ต่อไป ไฟล์ สำหรับดึงข้อมูลมาแสดง

Code: Select all

<?php
                $sql = "SELECT * FROM word WHERE name_word LIKE '".$wordtest."%'";
                $re = mysql_query($sql);
               
               $response = array();
                while($row = mysql_fetch_assoc($re)){
            
                    $a_row = array('id'=>$row['id_word'], 'name'=> $row['name_word']);
                    $response[] = $a_row;
                }
               echo json_encode($response);
    
?>
กระทู้เกี่ยวข้อง
Typeahead ทำ Autocomplete บน Booststap
การตรวจสอบข้อมูลซ้ำด้วย Ajax บน Booststap
Auto Fill ข้อมูลด้วย Ajax บน Booststap

Return to “Booststap Knowledge”

Users browsing this forum: No registered users and 2 guests