จากบทความที่แล้ว หลักการเขียน PHP Autocomplete ด้วย jQuery ในรูปแบบ JSON วันนี้จะมานำเสนอวิธีการเขียนโค๊ด Autocomplete ด้วย jQuery เป็นตัวอย่างสำหรับการทำงานด้วยแนวคิดที่ว่านี้ แล้วลองประยุกต์กันดูนะครับ
ในบทความนี้จะพูดถึงอะไรบ้าง ก็จะมีการเขียนโค๊ด PHP เพื่อเรียกข้อมูลจากฐานข้อมูล MySQL แล้วเขียนเป็นไฟล์ JavaScript เพื่อเรียกใช้ด้วย Autocomplete ด้วย jQuery อีกที
จากซอร์สโค๊ดจะเห็นว่า PHP จะสั่งคิวรี่เพียงครั้งเดียว และเมื่อพิมพ์รายชื่อ จะสามารถแสดง Autocomplete ขึ้นมาให้เลือกได้โดยไม่ต้องส่งค่าไปมาด้วย Ajax อีก ซึ่งประหยัดทั้งแบนวิธด์ และการทำงานของ MySQL ที่ใช้ CPU ที่เกินจำเป็นได้อีกด้วย แต่ถ้าจะให้ดีก็ไม่ต้องคิวรี่ครับ (ดึงไฟล์ที่ได้สร้างเป็น *.js ไว้แล้วมาใช้เลยจะดีที่สุด ^_^ )
1. ข้อมูลสมาชิกในฐานข้อมูล MySQL
ข้อมูลทดสอบอยู่ในไฟล์ tb_user.sql
2. หน้าค้นหา แบบ Autocomplete
หน้านี้จะอยู่ที่ไฟล์ autocomplete-optimize.php
ซอร์สโค๊ดที่ใช้ทำสอบจะดึงข้อมูลจากฐานขอมูลมาสร้างตัวแปรจาวาสคริปต์โดยตรง ยังไม่มีส่วนของการนำข้อมูลทั้งหมด มาสร้างเป็นไฟล์ .js เพื่อเรียกใช้ในหน้าที่ใช้ Autocomplete
ถ้าต้องการใช้งานจริง ก็ให้นำส่วนที่ดึงข้อมูลที่ต้องการทั้งหมดไปสร้างเป็นไฟล์ .js เมื่อมีการเพิ่มหรือแก้ไขข้อมูลสมาชิก ซึ่งใช้คำสั่งเขียนไฟล์ Text ของ PHP ธรรมดๆนี่เอง ^^
ดูวิธีดาวน์โหลดซอร์สโค๊ดที่นี่
ดาวน์โหลดที่นี่ข้อมูลเพิ่มเติม
jQuery UI Autocomplete
---------------------------------------------------------------------------------------
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Custom data and display</title>
<link rel="stylesheet" href="css/jquery-ui-1.10.2.custom.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.2.custom.min.js"></script>
<style>
#project-label {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
#project-icon {
float: left;
height: 32px;
width: 32px;
}
#project-description {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<?php
//-- ส่วนของการเชื่อมต่อฐานข้อมูล
$host = "localhost";
$user = "sunzandesign";
$pass = "abcd1234";
$dbname = "sunzan-design.com";
$conn = mysql_connect($host,$user,$pass) or die( "ไม่สามารถติดต่อฐานข้อมูลได้ ". mysql_error());
mysql_select_db($dbname) or die("เชื่อมต่อฐานข้อมูลไม่ได้ ". mysql_error());
mysql_query('SET NAMES UTF8');
//แสดงข้อมูลจากตารางสมาชิก
$comma = '';
$allEmp = '';
$sql="SELECT user_code,user_fullname FROM tb_user ORDER BY user_fullname ASC";
$result=mysql_query($sql) or die(mysql_error()." [$sql]");
while ($row = mysql_fetch_array($result)) {
$allEmp .= $comma.'{value: "'.$row['user_code'].'",label: "'.$row['user_fullname'].'"}';
if($comma==='') $comma = ',';
}
//การใช้งานจริง ส่วนนี้จะถูกเขียนเป็นไฟล์ .js เพื่อเรียกใช้ใน javascript
$allEmp = '['. $allEmp . ']';
//--
?>
<div id="project-label">ค้นหารายชื่อสมาชิก</div>
<input id="user_fullname" value=""/>
<input type="hidden" id="project-id" />
<p id="project-description"></p>
<!-- ส่วนนี้คือไฟล์ที่สร้างไว้เรียบร้อยแล้ว ในตัวอย่างจะเป็นไฟล์เปล่า -->
<script type="text/javascript" src="themes/js/allEmpData.js"></script>
<script type="text/javascript">
$(function() {
//ถ้าใช้งานจริง ส่วนนี้จะถูกเขียนขึ้น เป็นไฟล์ .js เมื่อมีการเพิ่ม/แก้ไข ข้อมูลสมาชิก
var autoCompleteData = <?php echo $allEmp?>;
//--
if(!autoCompleteData) var autoCompleteData = new Array();
$( "#user_fullname" ).autocomplete({
minLength: 0,
source: autoCompleteData,
focus: function( event, ui ) {
$( "#user_fullname" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#user_fullname" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
return false;
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
});
</script>
</body>
</html>
PHP CI MANIA - PHP Code Generator
โปรแกรมช่วยสร้างโค้ด ลดเวลาการเขียนโปรแกรม
สนับสนุนค่ากาแฟผู้เขียนได้ที่
ความคิดเห็น
แสดงความคิดเห็น