สำหรับตัวอย่างนี้ Typeahead จะทำงานร่วมกับ Ajax เมือกรอกข้อมูล ลงใน Textbox ระบบTypeahead จะนำข้อมูลที่เกี่ยวข้อง จาก database มา แสดง
ตัวอย่าง
ข้อมูลใน database
- 4.png (7.37 KiB) Viewed 2052 times
- 1.png (15.42 KiB) Viewed 2052 times
- 2.png (13.58 KiB) Viewed 2052 times
สำหรับวิธีใช้งานนั้นเริ่มจาก
แทรก bootstrap-typeahead.js / bootstrap.js / jquery.min.js ลงใน html
แทรก script ดังต่อไปนี้
โค้ด: เลือกทั้งหมด
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#wordtest').typeahead({
ajax : 'ajax.php',
});
});
</script>โค้ด: เลือกทั้งหมด
<input type="text" class="span3" id="wordtest" name="wordtest" data-provide="typeahead">โค้ด: เลือกทั้งหมด
<?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