|
|
|
พิมพ์ข้อความใน TextBox เเล้วค้นหาจากฐานข้อมูลมาแสดงเป็น List ให้เลือก |
|
|
|
|
|
|
|
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Example Autocomplete</title>
<style type="text/css">
* {
font: 12px Tahoma;
}
p {
font: 13px Tahoma;
font-weight: bold;
}
</style>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$("#amphur").autocomplete({
source: "data.php",
minLength: 1,
select: function(event, data) {
$("#province").val(data.item.province);
$("#postcode").val(data.item.postcode);
}
});
});
</script>
</head>
<body>
<form name="exam" action="" method="post">
<p>Example</p>
Amphur : <input type="text" id="amphur" name="amphur"/><br/>
Province : <input type="text" id="province" name="province" /><br/>
Postcode : <input type="text" id="postcode" name="postcode"/><br/>
</form>
</body>
</html>
data.php
<?
global $connection;
$host = 'localhost';
$user = 'user';
$password = 'password';
$dbname = 'test';
$connection = mysql_connect($host, $user, $password) or die('Could not connect : ' . mysql_error());
mysql_query("SET character_set_results='utf8'");
mysql_query("SET character_set_client='utf8'");
mysql_query("SET character_set_connection='utf8'");
mysql_query("collation_connection = 'utf8'");
mysql_query("collation_database = 'utf8'");
mysql_query("collation_server = 'utf8'");
mysql_select_db($dbname,$connection) or die('Could not select database : ' . mysql_error());
$query = "SELECT * FROM postcode where amphur like '%". $_GET['term'] ."%'";
$result = mysql_query($query);
$obj = array();
while ($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
$row_array['value'] = $row['amphur'];
$row_array['province'] = $row['province'];
$row_array['postcode'] = $row['postcode'];
array_push($obj, $row_array);
}
echo json_encode($obj);
?>
database
-- --------------------------------------------------------
-- Database: `test`
-- Table `postcode`
-- --------------------------------------------------------
CREATE TABLE `postcode` (
`id` int(7) unsigned NOT NULL auto_increment,
`postcode` varchar(5) collate utf8_unicode_ci NOT NULL,
`amphur` varchar(100) collate utf8_unicode_ci NOT NULL,
`province` varchar(100) collate utf8_unicode_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=31 ;
INSERT INTO `postcode` VALUES (1, '10100', 'ป้อมปราบศัตรูพ่าย', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (2, '10100', 'สัมพันธวงศ์', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (3, '10110', 'คลองเตย', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (4, '10120', 'บางคอแหลม', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (5, '10120', 'ยานนาวา', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (6, '10120', 'สาธร', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (7, '10130', 'พระประแดง', 'สมุทรปราการ');
INSERT INTO `postcode` VALUES (8, '10140', 'ราษฎร์บูรณะ', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (9, '10150', 'จอมทอง', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (10, '10150', 'บางขุนเทียน', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (11, '10160', 'ภาษีเจริญ', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (12, '10160', 'หนองแขม', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (13, '10170', 'ตลิ่งชัน', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (14, '10200', 'พระนคร', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (15, '10210', 'ดอนมือง', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (16, '10220', 'บางเขน', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (17, '10230', 'ลาดพร้าว', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (18, '10240', 'บางกะปิ', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (19, '10240', 'บึงกุ่ม', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (20, '10250', 'ประเวศ', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (21, '10250', 'สวนหลวง', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (22, '10260', 'พระโขนง', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (23, '10260', 'บางนา', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (24, '10270', 'เมือง', 'สมุทรปราการ');
INSERT INTO `postcode` VALUES (25, '10290', 'พระสมุทรเจดีย์', 'สมุทรปราการ');
INSERT INTO `postcode` VALUES (26, '10300', 'ดุสิต', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (27, '10320', 'ห้วยขวาง', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (28, '10330', 'ปทุมวัน', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (29, '10400', 'พญาไท', 'กรุงเทพฯ');
INSERT INTO `postcode` VALUES (30, '10400', 'ราชเทวี', 'กรุงเทพฯ');
|
ประวัติการแก้ไข 2010-12-18 19:43:48 2010-12-18 20:07:28
|
|
|
|
Date :
2010-12-18 19:41:13 |
By :
extenser |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ขอบคุณมาก ๆ นะคะ
เดี๋ยวจะลองทำดู
ถ้าติดปัญหาอะไรจะมาขอคำแนะนำอีกรอบค่ะ ^O^
|
|
|
|
|
Date :
2010-12-18 20:08:40 |
By :
Zaddddd |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
สิ่งที่สงสัยนะคะ
ไฟล์ data.php บรรทัดที่ 19
$query = "SELECT * FROM postcode where amphur like '%". $_GET['term'] ."%'";
_________________________________
ลองเอาโค้ดไปรันดู ก็ทำงานได้จริงๆ
แต่ยังสงสัย ว่า term มาจากไหนอ่ะค่ะ
|
ประวัติการแก้ไข 2010-12-19 10:24:18
|
|
|
|
Date :
2010-12-19 10:08:56 |
By :
Zaddddd |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$_GET['term']; มาจาก Request ผ่าน ajax ของ jQuery ครับ
|
|
|
|
|
Date :
2010-12-19 12:25:21 |
By :
extenser |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 04
|