ถามหน่อยครับ ต้องแก้ยังไงใน jQuery autocomplete ในการดึงข้อมูลใหม่
_ผมต้องการให้ไปดึงข้อมูลใหม่มาใส่ใน autocomplete เมื่อมีการพิมข้อความ
เช่น พิมพ์ a ไฟล์ get.php ก็จะไปดึงข้อมูลที่มี a มาใส่ใน autocomplete
ถ้าพิมพ์ต่อไปอีกเป็น ab ไฟล์ get.php ก็จะไปดึงข้อมูลที่มี ab มาใส่ใน autocomplete
Code (JavaScript)
$().ready(function() {
$("#start").keypress(function() {
$.get(
"/get.php",
{q: $("#txt-start").val()},
function(data) {
$("#start").autocomplete({
source: data,
minLength: 1,
matchContains: true,
mustMatch: true,
selectFirst: false
})
}
)
})
Tag : HTML/CSS, JavaScript, Action Script, Ajax, jQuery
Date :
2012-06-30 14:59:47
By :
darker
View :
1977
Reply :
6
ไฟล์แรก Auto.php
Code (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=windows-874" />
<title>Untitled Document</title>
<link href="css/greentheme/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#auto').autocomplete({
source: "getdata.php?term="+$("#auto").val(),
minLength: 2
});
});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<label for="auto"></label>
<input type="text" name="auto" id="auto" />
</form>
</body>
</html>
ไฟล์ที่สอง getdata.php
Code (PHP)
<?
$conn = mysql_connect('localhost', 'root', '12345');
mysql_select_db('bookshop');
mysql_query("set character set utf8");
$text = $_GET['term'];
$query = "SELECT PROVINCE_NAME FROM province WHERE PROVINCE_NAME LIKE'%".$text."%'";
$result = mysql_query($query);
$json = '[';
$first = true;
while($row = mysql_fetch_array($result)){
if (!$first) {
$json .= ',';
} else {
$first = false;
}
$json .= "\"".$row['PROVINCE_NAME']."\"";
}
$json .= ']';
echo $json;
?>
ลองนำไปประยุกต์ดูนะครับ ผมทำเป็นแต่แบบนี้
ประวัติการแก้ไข 2012-06-30 19:14:36
Date :
2012-06-30 19:13:34
By :
Krungsri
Code (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=windows-874" />
<title>Untitled Document</title>
<link href="css/greentheme/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#auto').autocomplete({
source: "getdata.php?term="+$("#auto").val(),
minLength: 2
});
});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<label for="auto"></label>
<input type="text" name="auto" id="auto" />
<input type="hidden" name="key" id="key" />
</form>
</body>
</html>
ถ้าผมต้องการ ข้อมูลที่เลือกนั้น คือ $row['PROVINCE_NAME'] ที่ตัวใดตัวหนึ่ง แล้วต้องการให้ id $row['PROVINCE_ID'] มาใส่ <input type="hidden" name="key" id="key" /> ทำยังไงครับ ขอบคุณครับ
Date :
2012-06-30 20:30:46
By :
darker
เพื่อเก็บข้อมูลอะไรหรอครับ
Date :
2012-06-30 21:10:37
By :
Krungsri
ผมต้องการค่าที่เลือก โดยใช้ค่าในนี้ <input type="hidden" name="key" id="key" /> ไป ทำงานต่ออีกส่วน
ตรงนี้ แค่ต้องการแสดงให้ผู้ฝช้ห็นว่าเลือกอะไรเท่านั้นครับ
เนื่องจาก array ผมมีรูปแบแบนี้ครับ
[0]
[id] : 111
[name] : สมชาย
[lname] : ssss
bla...
[1]
[id] : 112
[name] : สมหญิง
[lname] : xxxx
bla...
ใน <input type="hidden" name="key" id="key" /> อยากเอาค่า จาก id ไปใส่ ครับ
คือได้ข้อมูลมาจาก file json ไม่ได้ดึงจากานข้ิมูลครับบ
Date :
2012-06-30 22:24:47
By :
darker
ต้องทำเป็น Ajax ครับ
ไฟล์แรก auto.php
Code (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=windows-874" />
<title>Untitled Document</title>
<link href="css/greentheme/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#auto').autocomplete({
source: function( request, response ) {
$.ajax({
url: "getdata.php",
dataType: "json",
data: {term: request.term},
success: function(data) {
response($.map(data, function(item) {
return {
id: item.ID,
label: item.LABLE
};
}));
}
});
},
minLength: 2,
select: function(event, ui) {
$("#IDP").val(ui.item.id);
}
});
});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="Showcode.php">
<p>
<label for="auto">รายชื่อจังหวัด </label>
<input type="text" name="auto" id="auto" />
</p>
<p>
<input type="hidden" name="IDP" id="IDP" value=""/>
</p>
<p>
<input type="submit" name="Submit" id="button" value="Submit" />
</p>
</form>
</body>
</html>
ไฟล์ที่สอง getdata.php
Code (PHP)
<?
$conn = mysql_connect('localhost', 'root', '12345');
mysql_select_db('bookshop');
mysql_query("set character set utf8");
$text = $_REQUEST['term'];
$query = "SELECT PROVINCE_ID, PROVINCE_NAME FROM province WHERE PROVINCE_NAME LIKE'%".$text."%'";
$result = mysql_query($query);
$json = '[ ';
$first = true;
while($row = mysql_fetch_array($result)){
if (!$first) {
$json .= ',';
} else {
$first = false;
}
$json .= "{ \"ID\" : \"".$row['PROVINCE_ID']."\",\"LABLE\" : \"".$row['PROVINCE_NAME']."\" } ";
}
$json .= ' ]';
echo $json;
?>
ไฟล์ที่สาม Showcode.php
Code (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=windows-874" />
<title>Untitled Document</title>
</head>
<body>
<?
echo "รหัสที่เลือก ".$_POST[IDP];
?>
</body>
</html>
Date :
2012-06-30 23:14:27
By :
Krungsri
Load balance : Server 03