ต้องการทำ AutoComplete แบบระบบใส่ข้อมุลลง InputBox ให้เอง
ajax aurtocomplete ครับ เอามาโมนิดๆหน่อย ได้เรื่องเลย
Date :
2016-08-04 14:41:51
By :
Dragons_first
ได้แล้วครับ แต่เจอปัญหาใหม่ คือก่อนหน้านี้ผมมีสคริปคลิก inputbox แล้วจะเป็น Calendar แต่หลังจากใส่สคริป Auto Complete กับทำ Auto Fill เข้าไปแล้ว ฟังก์ชั่น Calendar มันหายใช้การไม่ได้
อันนี้เป็นคำสั่งที่ใส่ไว้ใน head ครับ
Code (PHP)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/default.css"/>
<title>Untitled Document</title>
<link rel="stylesheet" media="all" type="text/css" href="jquery-ui.css" />
<link rel="stylesheet" media="all" type="text/css" href="jquery-ui-timepicker-addon.css" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>
<script type="text/javascript">
$(function(){
$("#dateInput").datepicker({
dateFormat: 'dd-M-yy'
});
});
$(function(){
$("#dateInput2").datepicker({
dateFormat: 'dd-M-yy'
});
});
$(function(){
$("#dateInput3").datepicker({
dateFormat: 'dd-M-yy'
});
});
</script>
<script type="text/javascript" src="autocomplete.js"></script>
<link rel="stylesheet" href="autocomplete.css" type="text/css"/>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#txtCustCode").change(function(){
$.ajax({
url: "CustomerSearchInput.php" ,
type: "POST",
data: 'sCusID=' +$("#txtCustCode").val()
})
.success(function(result) {
var obj = jQuery.parseJSON(result);
if(obj == '')
{
$('input[type=text]').val('');
}
else
{
$.each(obj, function(key, inval) {
$("#txtCustName").val(inval["Customer_Name"]);
$("#txtAddress").val(inval["Address1"]);
$("#txtCustTEL").val(inval["Tel_No"]);
$("#txtCustTEL2").val(inval["Fax_No"]);
});
}
});
});
});
</script>
Date :
2016-08-04 15:12:48
By :
thanabordees93
<script src="http://code.jquery.com/jquery-latest.js"></script>
เอาออกครับ มันชนกัน โคร้มมมมมมมมมมมมม
Date :
2016-08-04 16:01:35
By :
Dragons_first
ได้แล้วครับ ขอบคุณมาก ๆ เลย
Date :
2016-08-04 16:39:02
By :
thanabordees93
รบกวนสอบถามอีกครั้งครับ
คือว่าตัว Auto Complete + Auto Fill ที่ผมใช้อยู่ คือถ้าพิมพ์ในช่องค้นหาแล้วข้อมูล ไม่ตรงกับในฟิลด์ที่ใช้เป็นคีย์ค้นหา เพียงแค่จำนวนตัวอักษรไม่เท่ากัน เช่นฟิลด์ใน db มีช่องว่าง 1 ช่อง ข้อมูลมันจะไม่แสดงครับ แล้วมันจะเคลียร์ค่า input box ช่องอื่นไปด้วย แต่ถ้าพิมพ์ตรงกันเป๊ะ ๆ กับใน db มันถึงจะแสดงข้อมูล Auto Fill ได้ครับ พอมีวิธีแก้ไขในจุดนี้มั้ยครับ
Auto Fill
<script type="text/javascript">
$(document).ready(function(){
$("#txtCustCode").change(function(){
$.ajax({
url: "CustomerSearchInput.php" ,
type: "POST",
data: 'sCusID=' +$("#txtCustCode").val()
})
.success(function(result) {
var obj = jQuery.parseJSON(result);
if(obj == '')
{
$('input[type=text]').val('');
}
else
{
$.each(obj, function(key, inval) {
$("#txtCustName").val(inval["Customer_Name"]);
$("#txtAddress").val(inval["Address1"]+" "+inval["Address2"]+" "+inval["Address3"]+" "+inval["Address4"]+" "+inval["City"]+" "+inval["Zip_Code"]);
$("#txtCustTEL").val(inval["Tel_No"]);
$("#txtCustTEL2").val(inval["Fax_No"]);
});
}
});
});
});
</script>
CustomerSearchInput.php
<?php
$objConnect = mysql_connect("localhost","root","root") or die(mysql_error());
$objDB = mysql_select_db("testdb");
mysql_query("SET character_set_results=utf8");
mysql_query("SET character_set_client=utf8");
mysql_query("SET character_set_connection=utf8");
$strSQL = "SELECT * FROM customer WHERE 1 AND Customer_Code = '".$_POST["sCusID"]."' ";
$objQuery = mysql_query($strSQL) or die (mysql_error());
$intNumField = mysql_num_fields($objQuery);
$resultArray = array();
while($obResult = mysql_fetch_array($objQuery))
{
$arrCol = array();
for($i=0;$i<$intNumField;$i++)
{
$arrCol[mysql_field_name($objQuery,$i)] = $obResult[$i];
}
array_push($resultArray,$arrCol);
}
mysql_close($objConnect);
echo json_encode($resultArray);
?>
Date :
2016-08-05 14:37:58
By :
thanabordees93
trim() ครบฝั่ง sql ครับ
ส่วนตรงช่องกรอก ต้องดีบั๊กดูก่อนว่า ตอนส่งค่าเข้าไปค้นหามันส่งตัวอะไรไปบ้างครับ
Date :
2016-08-05 14:52:44
By :
Dragons_first
Load balance : Server 05