|
 |
| |
ผมมีโค้ดAutocomplete ผมจะดึงข้อมูลจากฐานข้อมูลมาค้นหาใน Autocomplete ได้ยังไงครับ |
| |
 |
|
|
 |
 |
|
<!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.1/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.1/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>
Tag : PHP
|
|
|
 |
 |
 |
 |
| Date :
2020-08-26 11:00:53 |
By :
ipiammax |
View :
975 |
Reply :
13 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
โค้ดตัวอย่าง จขกท. นำมาจาก
https://jqueryui.com/autocomplete/
วิธีใช้ PHP array ใน JS พึ่ง JSON
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.1/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.1/jquery-ui.js"></script>
</head>
<body>
<?php
// mysqli connection
// query ข้อมูลมาเก็บไว้ใน Array
$phpArray = ...;
?>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
<script>
$( function() {
var availableTags = <?php echo json_encode($phpArray); ?>; // วางแทนของเดิม
$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>
</body>
</html>
มาตามคำขอจาก pm 
|
| |
|
|
| |
| Date :
2020-08-26 13:56:17 |
By :
PhrayaDev |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
 ตอบความคิดเห็นที่ : 1 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-08-26 13:56:17
รายละเอียดของการตอบ ::
ผมใส่ถูกไหมครับ เพราะทำแล้วยังไม่ได้ครับ
<!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.1/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.1/jquery-ui.js"></script>
</head>
<body>
<?php
// mysqli connection
include('condb.php');
// query ข้อมูลมาเก็บไว้ใน Array
$sql = "select * from opduser";
$query = mysqli_query($condb,$sql);
$phpArray=mysqli_fetch_array($query,MYSQLI_ASSOC);
?>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
<script>
$( function() {
var availableTags = <?php echo json_encode($phpArray); ?>; // วางแทนของเดิม
$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>
</body>
</html>
|
ประวัติการแก้ไข
2020-08-27 12:59:05
| |
|
|
| |
| Date :
2020-08-27 12:58:38 |
By :
ipiammax |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
Code (PHP)
$sql = "select * from opduser";
$query = mysqli_query($condb,$sql);
$phpArray = [];
while($row = mysqli_fetch_array($query))
{
$phpArray[] = $row['autocomplete']; // ใส่คอลัมน์ที่เก็บ autocomplete
}
|
| |
|
|
| |
| Date :
2020-08-27 13:23:00 |
By :
PhrayaDev |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ตอบความคิดเห็นที่ : 3 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-08-27 13:23:00
รายละเอียดของการตอบ ::
ตรงนี้คืออะรไครับ หรือใส่อะไร $phpArray = [];
<!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.1/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.1/jquery-ui.js"></script>
</head>
<body>
<?php
// mysqli connection
include('condb.php');
// query ข้อมูลมาเก็บไว้ใน Array
$sql = "select * from opduser";
$query = mysqli_query($condb,$sql);
$phpArray = ['$query'];
while($row = mysqli_fetch_array($query))
{
$phpArray[] = $row['name']; // ใส่คอลัมน์ที่เก็บ autocomplete
}
?>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
<script>
$( function() {
var availableTags = <?php echo json_encode($phpArray); ?>; // วางแทนของเดิม
$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>
</body>
</html>
|
ประวัติการแก้ไข
2020-08-27 13:35:38
| |
|
|
| |
| Date :
2020-08-27 13:33:27 |
By :
ipiammax |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
$phpArray = []; คือการกำหนดตัวแปรนั้นให้เป็น array (เป็นวิธีใหม่ที่เพิ่งมีขึ้นใน PHP 5.4 มั้งถ้าจำไม่ผิด)
ซึ่งมีความหมายเหมือนกันกับ $phpArray = array(); ใน PHP 5.3 หรือต่ำกว่า
|
| |
|
|
| |
| Date :
2020-08-27 13:38:26 |
By :
PhrayaDev |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ตอบความคิดเห็นที่ : 5 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-08-27 13:38:26
รายละเอียดของการตอบ ::
ผมมีโค้ดตัวนี้ แต่มันใช้เฉพาะ text ไม่ได้ครับ ถ้ามี text 5 อัน มันจะเป็น autocomplete ทั้งหมด 5 อันเลยครัล อยากทราบว่าจะกำหนดให้ใช้ได้เฉพาะ texะ ที่ต้องการทำยังไงครับ
<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
$opduser = "";
while ($result = mysqli_fetch_array($query)) {
$opduser .= "'" . $result['opduser_name'] . "',";
}
echo rtrim($opduser, ",");
?>
];
$(function () {
$("input").autocomplete({
source: [states]
});
});
</script>
<style>
.xdsoft_autocomplete_dropdown{
padding: 8px;
}
</style>
|
| |
|
|
| |
| Date :
2020-08-27 13:46:27 |
By :
ipiammax |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ใส่ LIMIT ใน query + where clause ครับ
หรือทดสอบแบบรวดเร็ว สมมติต้องการอันเดียว
ใน js ก็ไม่ต้องครอบ JSON
Code (PHP)
var states = <?php echo $phpAC1; ?>; // autocomplete รายการเดียว
// หรือใช้แบบนี้
source: [<?php echo $phpArray[0] . ", " . $phpArray[2]; ?>;] // ดึงจาก element ที่ 1, 3 จาก $phpArray
ต่อไปครอบโค้ดด้วยครับ จะได้อ่านง่ายๆ หน่อย
|
| |
|
|
| |
| Date :
2020-08-27 14:00:09 |
By :
PhrayaDev |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
งั้นวางตรงนี้เลยครับ ...ครอบ PHP Code ด้วย
|
| |
|
|
| |
| Date :
2020-08-27 15:50:20 |
By :
PhrayaDev |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
มีตัวอย่างมาให้ลองดูครับ เผื่อช่วยได้
Code
<table cellpadding="10">
<thead>
<tr>
<th><h3 style="color:blue">Autocomplete แบบคิวรี่ทุกครั้ง</h3></th>
<th><h3 style="color:green">Autocomplete แบบคิวรี่เก็บไว้ใน Array</h3></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="ui-widget">
<label for="birds">ค้นหาสมาชิก : </label>
<input id="birds">
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
ผลลัพธ์ที่เลือก :
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</td>
<td>
<div class="ui-widget">
<label for="birds">ค้นหาสมาชิก : </label>
<input id="user_fullname">
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
ผลลัพธ์ที่เลือก :
<div id="log2" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</td>
</tr>
</tbody>
</table>
Code (JavaScript)
<script type="text/javascript">
var autoCompleteData = new Array();
function setAutoComplete(){
$( "#user_fullname" ).autocomplete({
minLength: 0,
source: autoCompleteData,
select: function( event, ui ) {
//$( "#user_fullname" ).val( ui.item.label );
$( "<div>" ).text( ui.item.value + ' : ' + ui.item.label ).prependTo( "#log2" );
$( "#log2" ).scrollTop( 0 );
return false;
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
}
//เรียกข้อมูลสมาชิกมาเก็บไว้ในตัวแปร autoCompleteData ผ่านการรับส่งข้อมูลแบบ AJAX
$.ajax({
dataType: "json",
url: ajaxURL + "&action=query",
success: function(return_data){
autoCompleteData = return_data;
setAutoComplete();
}
});
</script>
Code (PHP)
<?php
include_once('classes/connection.php');
/***** FUNCTION DEFINED *****/
function search(){
$db = new dbConnect();
$search_key = isset($_GET['term']) ? $_GET['term'] : '';
$no = 0;
$data = array();
$sql = "SELECT mbr_code, mbr_name FROM `tb_member` WHERE mbr_name LIKE '%$search_key%' "; //-- ข้อมูลสาขาทั้งหมด
$qry = mysql_query($sql) or die( $db->showError('',__FILE__,__LINE__) );
while($row = mysql_fetch_assoc($qry)){
$data[] = array('id'=>$row['mbr_code'], 'value'=>$row['mbr_name']);
}
echo json_encode($data);
}
function query(){
$db = new dbConnect();//เชื่อมต่อฐานข้อมูล
$data = array();
$sql = "SELECT mbr_code, mbr_name FROM `tb_member` WHERE mbr_status > 0 "; //-- ข้อมูลสมาชิกที่ใช้งาน
$qry = mysql_query($sql) or die( $db->showError('',__FILE__,__LINE__) );
while($row = mysql_fetch_assoc($qry)){
$data[] = array('value'=>$row['mbr_code'], 'label'=>$row['mbr_name']);
}
echo json_encode($data);
}
//-- END DEFINE FUNCTION
//***** Call Function *****//
$action = isset($_POST['action']) ? $_POST['action'] : '';
if($action == '') $action = isset($_GET['action']) ? $_GET['action'] : '';
switch( $action ){
case 'search':
search();
break;
case 'query':
query();
break;
}
//-- END Call Function
?>
ปล. ส่วนของ classes/connection.php คือการเชื่อมต่อฐานข้อมูล เปลี่ยนไปใช้ของตัวเองนะครับ
ปล.2 mysql_xxxxx() เปลี่ยนเป็น mysqli_xxxxx() เพื่อให้ใช้กับเวอร์ชั่นใหม่ได้นะครับ
|
| |
|
|
| |
| Date :
2020-08-27 16:27:52 |
By :
{Cyberman} |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 04
|
