Autocomplete - itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี https://www.itoffside.com ข้อมูลข่าวสารและเรื่องราวบนโลกของไอทีที่ ล้ำหน้า พร้อมสาระการเขียนโปรแกรมคอมพิวเตอร์ Mon, 08 Jun 2015 15:11:44 +0000 th hourly 1 https://wordpress.org/?v=6.8.5 https://www.itoffside.com/wp-content/uploads/2020/04/cropped-favicon-96x96-1-32x32.png Autocomplete - itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี https://www.itoffside.com 32 32 ทำช่อง text Autocomplete เหมือน Google ด้วย jQuery Plugin https://www.itoffside.com/make-text-autocomplete-like-google-with-jquery-plugin/ https://www.itoffside.com/make-text-autocomplete-like-google-with-jquery-plugin/#respond Mon, 08 Jun 2015 15:11:44 +0000 https://www.itoffside.com/?p=2488 สวัสดีครับ สำหรับบทความนี้แนะนำการใช้งาน Autocomplete like Google jQuery Plugin คือเวลาที่เราทำการพิมพ์ข้อความ (จากตัวอย่างบทความเป็นชื่อจังหวัด) ใน Textbox แล้วมี ชื่อข้อความเต็ม แสดงขึ้นมาให้เราตัดสินใจเลือก วิธีการเขียนง่ายๆครับ ไม่ได้มีอะไรซับซ้อนมาก และเรานำ plugin มาประยุกต์ใช้งานให้เหมาะสมกับ...

The post ทำช่อง text Autocomplete เหมือน Google ด้วย jQuery Plugin first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

]]> สวัสดีครับ สำหรับบทความนี้แนะนำการใช้งาน 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

The post ทำช่อง text Autocomplete เหมือน Google ด้วย jQuery Plugin first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

]]> https://www.itoffside.com/make-text-autocomplete-like-google-with-jquery-plugin/feed/ 0