จากที่ได้เขียนโปรแกรมโดยใช้ jQuery Autocomplete ร่วมกับ PHP + MySQL จะเห็นว่าการพิมพ์ชื่อติดต่อกันเร็วๆ จะมีการส่งค่าด้วย AJAX เมื่อช่องค้นหามีตัวอักษรตั้งแต่ 2 ตัวขึ้นไป jQuery Autocomplete จะไม่ได้ทำการค้นหาทุกครั้งที่มี keyup เพราะกรณีพิมพ์ชื่อยาวๆ 6 ตัวติดการจะเกิดการเรียกข้อมูลจากฐานข้อมูลติดต่อกันมากเกินไป สังเกตจาก Firebug จะเห็นว่ารายการก่อนๆ จะถูก Abort เหลือเพียงการส่งข้อมูลล่าสุดเท่านั้นที่จะยังคงทำงาน
ในส่วนก่อนหน้านั้นไม่แน่ใจว่าเรียกคิวรี่ฐานข้อมูลไปหรือยัง แต่ก็ไม่ได้ส่งผลเรื่องการคืนค่ากลับมาแสดงผลชนกันกับคำสั่งค้นหาอื่นๆ
ส่วนแบบที่ใช้วิธีเก็บลง Array ก่อนนั้นถ้าข้อมูลมีมากเกินไปจะเห็นว่าเกิดอาการค้างเป็นระยะๆ ดังนั้นลองทดสอบดูนะครับ ว่าระดับข้อมูลไหนน่าจะนำมาใช้กับวิธีใด
แบบฟอร์ม HTML
<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>
Autocomplete แบบคิวรี่ทุกครั้ง
<script>
var ajaxURL = "ajax_service.php?source=member";
$(function(){
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#birds" ).autocomplete({
source: ajaxURL + "&action=search",
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
ui.item.id + " : " + ui.item.value :
"Nothing selected, input was " + this.value );
}
});
});
</script>
Autocomplete แบบคิวรี่เก็บไว้ใน Array
<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>
โค๊ดส่วนของ PHP+MySQL
<?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
?>
ความคิดเห็น
แสดงความคิดเห็น