ทำ autocompaelt ดึงข้อมูล json ตัวอย่างจาก http://easyautocomplete.com/ run ไม่ออก ครับ
โค๊ดทั้งหมดครับ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=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var options = {
url: "test_data1.php",
getValue: "name",
list: {
match: {
enabled: true
}
},
theme: "square"
};
$("#countries").easyAutocomplete(options);
</script>
</head>
<body>
<input id="countries"/>
</body>
</html>
Code (PHP) <?php
include("conen.php");
//$objConnect = mysql_connect("localhost","root","") or die(mysql_error());
//$objDB = mysql_select_db("test_db");
$strSQL = "select id from `table_A`
group by id order by id limit 0,10";
$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);
?>
Tag PHP, JavaScript, Action Script, Ajax, jQuery
ประวัติการแก้ไข
Date :
2016-07-22 11:54:23By :
rock_rockView :
3394Reply :
10
ขอดู JSON ที่ echo ออกมาหน่อยครับ
Date :
2016-07-22 14:00:23By :
thesin18598
อินครูดไฟล์มาครบหรือเปล่าurl: "test_data1.php", เท่าที่จำได้ และดูจากตัวอยาง ไฟล์ที่ดึงมาใช้งานต้องเป็น .json เท่านั้นนะ var options1 = {
data: [<?php
$teacher = $mysql->queryResult("SELECT * FROM `tb_teacher` ORDER BY `teacherID`");
while($rs = $teacher->fetch()){
?>{"character1": "<?php echo $rs['teacherName']; ?>","teacherID": "<?php echo $rs['teacherID']; ?>"},
<?php } ?>
],
getValue: "character1",
list: {
onSelectItemEvent: function() {
var value = $("#basics1").getSelectedItemData().teacherID;
$("#teacher1").val(value).trigger("change");
},
match: {
enabled: true
}
}
};
$("#basics1").easyAutocomplete(options1);
ส่วนอันนี้เป็น input เพิ่มลูกเล่นอะไรนิดหน่อย <div class="form-group">
<label>ประธานกรรมการควบคุมงานนิพนธ์</label>
<input class="form-control" id="basics1" name="basics1">
<input id="teacher1" name="teacher1" type="hidden" />
<hr>
</div>
ประวัติการแก้ไข
Date :
2016-07-22 14:17:34By :
apisitp
ถ้าเป็นแบบนี้ดึงข้อมูลออกคับ ที่อยากได้คือ อยากดึงข้อมูลจากฐานข้อมูลครับ เลย ลองใส่ URL ให้ดึงมาจากไฟล์ test_data1.php Code (PHP) <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
Date :
2016-07-22 15:47:17By :
rock_rock
Code (PHP) <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
loop sql ตรงนี้เลยครับ
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
Date :
2016-07-22 18:03:44By :
Dragons_first
Code (PHP) <?PHP
$data = /** whatever you're serializing **/;
header('Content-Type: application/json');
echo json_encode($data);
ประวัติการแก้ไข
Date :
2016-07-22 18:51:09By :
Chaidhanan
jquery-ui: autocomplete->multiple valueCode (PHP) public function autocomplete($param)
{
$str_sql = "SELECT item, unit FROM issue_detail WHERE item IS NOT NULL AND LOWER(item) LIKE LOWER('%".$this->input->get('term', TRUE)."%') GROUP BY item ASC LIMIT 20";
$rs = $this->db->query($str_sql)->result();
foreach ($rs as $row)
{
$data[] = array('label' => $row->item, 'unit' => $row->unit);
}
echo json_encode($data);
}
Code (JavaScript)
$(".autocomplete").autocomplete({
source: base_url + "issue/autocomplete/item/",
minLength: 0,
focus: function( event, ui ) {
$(this).val( ui.item.value);
return false;
},
select: function(e, ui) {
var tr = $(this).closest('tr');
var val4 = tr.find('td:nth-child(5) input').val().trim();
if (isNaN(val4) == true && val4.length > 0) {
tr.addClass('bg-error');
}
else {
tr.removeClass('bg-error');
}
tr.find('td:nth-child(6) input').val(ui.item.unit);
}
});
Date :
2016-07-23 08:29:18By :
fossil31
Server 05
Load balance : Server 05
