สวัสดีครับ สำหรับบทความนี้แนะนำการใช้งาน Autocomplete like Google jQuery Plugin คือเวลาที่เราทำการพิมพ์ข้อความ (จากตัวอย่างบทความเป็นชื่อจังหวัด) ใน Textbox แล้วมี ชื่อข้อความเต็ม แสดงขึ้นมาให้เราตัดสินใจเลือก วิธีการเขียนง่ายๆครับ ไม่ได้มีอะไรซับซ้อนมาก และเรานำ plugin มาประยุกต์ใช้งานให้เหมาะสมกับงานของเราเท่านั้น
ลองทดสอบการใช้งานได้ที่ นี้ครับ คลิกที่นี้เพื่อน Demo
ดาวน์โหลด Sourcecode ได้ที่นี้ คลิกที่นี้เพื่อดาวน์โหลด
วิธีการใช้งาน
1. ให้นำ code นี้ไปวางไว้บรรทัดบนสุดของไฟล์ index.php
|
1 2 3 4 5 |
<?php include_once 'connect.php'; $sql = "select * from province "; $query = mysql_query($sql); ?> |
อธิบาย code
เชื่อมต่อฐานข้อมูลพร้อมกับดึงข้อมูลตารางจังหวัดออกมา
2. ให้นำ code นี้ไปวางที่ tag <head> ของไฟล์ index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<link type="text/css" rel="stylesheet" href="jquery.autocomplete.css" /> <script type="text/javascript" src="jquery-1.11.2.min.js"></script> <script type="text/javascript" src="jquery.autocomplete.js"></script> <script type="text/javascript"> var states = [ <?php $province = ""; while ($result = mysql_fetch_array($query)) { $province .= "'" . $result['province_name'] . "',"; } echo rtrim($province, ","); ?> ]; $(function () { $("input").autocomplete({ source: [states] }); }); </script> |
อธิบาย code
include ไฟล์ plugin javascript และ ตัวแปร states เก็บค่าชื่อจังหวัด โดยวนรับชื่อข้อมูลจังหวัดเก็บไว้ในตัวแปร $province
3. ให้นำ Code นี้ไปวางไว้ในไฟล์ connect.php
|
1 2 3 4 5 |
<?php mysql_connect("localhost", "root", "") or die ("error connection!!!"); mysql_select_db("states") or die("error db!!!"); mysql_query("SET NAMES UTF8"); ?> |
สำหรับบทความนี้เป็นบทความสั้นๆ แนะนำการใช้งาน auto complete textbox แบบง่าย ครับ
หากต้องการข้อมูลเพิ่มเติมสามารถอ่านได้ที่เว็บนี้ครับ http://xdsoft.net/jqplugins/autocomplete#localandremote
