ทำช่อง text Autocomplete เหมือน Google ด้วย jQuery Plugin

สวัสดีครับ สำหรับบทความนี้แนะนำการใช้งาน Autocomplete like Google jQuery Plugin คือเวลาที่เราทำการพิมพ์ข้อความ (จากตัวอย่างบทความเป็นชื่อจังหวัด) ใน Textbox แล้วมี ชื่อข้อความเต็ม แสดงขึ้นมาให้เราตัดสินใจเลือก วิธีการเขียนง่ายๆครับ ไม่ได้มีอะไรซับซ้อนมาก และเรานำ plugin มาประยุกต์ใช้งานให้เหมาะสมกับงานของเราเท่านั้น

autocomplete-01
ลองทดสอบการใช้งานได้ที่ นี้ครับ คลิกที่นี้เพื่อน Demo
ดาวน์โหลด Sourcecode ได้ที่นี้ คลิกที่นี้เพื่อดาวน์โหลด

วิธีการใช้งาน

1. ให้นำ code นี้ไปวางไว้บรรทัดบนสุดของไฟล์ index.php

<?php
include_once 'connect.php';
$sql = "select * from province ";
$query = mysql_query($sql);
?>

 อธิบาย code
เชื่อมต่อฐานข้อมูลพร้อมกับดึงข้อมูลตารางจังหวัดออกมา
2. ให้นำ code นี้ไปวางที่ tag <head> ของไฟล์ index.php

<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

<?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

You May Also Like

About the Author: benext

โปรแกรมเมอร์ ติดต่อ : itoffside@hotmail.com

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.