ออกตัวก่อนเลยว่าต้องขอโทษด้วยครับ พอดีขี้เกียจนิดหน่อยเลยไม่ได้เขียนบทความเป็นภาษาอังกฤษ วันนี้ก็ลองนั่งเล่น นั่งทำไปเรื่อยก็เลยมาบันทึกเป็นบทความกันลืมซะหน่อย
ซึ่งจะเป็นการทำการ search แบบง่ายๆ จาก MySQL โดยใช้ AJAX มาช่วยในการแสดงผลครับ วิธีการก็ไม่ค่อยมีอะไรมาก ผมจะเริ่มจากการสร้าง Database เลยก็แล้วกันครับ
1. สร้าง Database ขึ้นมาชื่อว่า directory และสร้าง table จาก script ข้างล่างนี้ครับ
CREATE TABLE `Directory`.`member` (
`id` TINYINT( 2 ) NOT NULL AUTO_INCREMENT ,
`prefix` VARCHAR( 50 ) NOT NULL ,
`firstname` VARCHAR( 50 ) NOT NULL ,
`lastname` VARCHAR( 50 ) NOT NULL ,
`nickname` VARCHAR( 50 ) NOT NULL ,
`email` VARCHAR( 50 ) NOT NULL ,
`mobile` VARCHAR( 20 ) NOT NULL ,
`address` TEXT NOT NULL ,
PRIMARY KEY ( `email` ) ,
INDEX ( `id` )
) ENGINE = MYISAM CHARACTER SET utf8 COLLATE utf8_general_ci;
เมื่อได้ Database แล้ว มาใส่ข้อมูลเล็กๆ น้อยๆ ลง Database กันครับ
INSERT INTO `member` (`prefix`, `firstname`, `lastname`, `nickname`, `email`, `mobile`, `address`) VALUES
('Mr.', 'John', 'Doe', 'John', 'john@email.com', '111-111111', 'on the road'),
('Miss', 'Jane', 'Doe', 'Jane', 'jane@email.com', '222-22222', 'same with John'),
('Mr', 'David', 'Beckham', 'David', 'david@email.com', '333-333', 'LA');
จากนั้นจะสร้างหน้าที่ไว้ใช้สำหรับค้นหาข้อมูล ซึ่งจะใช้ไฟล์ HTML ง่ายๆ ครับ ตาม code ข้างล่างนี้ ชื่อไฟล์คือ livesearch.html
<html>
<head>
<script src="livesearch.js"></script>
<title>Search</title>
<meta http-equiv=Content-Type content="text/html; charset=tis-620">
</head>
<body>
<form>
Search: <input type="text" name="search" id="search" onkeyup="searchUser(this.value)">
</form>
<div id="searchresult" name="searchresult"> Search results ...</div>
</body>
</html>
เมื่อมีการกดคีย์ใดๆ ก็ตามในช่อง input ค่าจะถูกส่งไปยังไฟล์ livesearch.js ที่ไว้ใช้เก็บ Javascript ครับ ซึ่งในไฟล์นี้ก็จะส่ง url และ string ข้อความ ไปยังไฟล์ PHP เพื่อใช้ในการค้นหาแบบง่าย ชื่อไฟล์นี้คือ livesearch.js
<?php
$q=$_GET["q"];
error_reporting(E_ALL);
function openDB ($host, $user, $pass){
try {
if ($db = mysql_connect ($host, $user, $pass)){
return $db;
} else {
throw new exception ("Sorry, could not connect to mysql");
}
} catch (exception $e) {
echo $e->getmessage();
}
}
function selectDB ($whichdb, $db){
try {
if (!mysql_select_db($whichdb,$db)){
throw new exception ("Sorry, could not be opened");
}
} catch (excetion $e){
echo $e->getmessage();
}
}
function closeDB ($db){
mysql_close($db);
}
$db = openDB("localhost","root","password");
selectDB("Directory", $db);
if ($query = mysql_query("SELECT * FROM member WHERE firstname LIKE '%$q%' OR lastname LIKE '%$q%' OR nickname LIKE '%$q%'")){
while ($data = mysql_fetch_array($query)){
echo "Firstname: " . $data['firstname'] . "<br />";
echo "Lastname: " . $data['lastname'] . "<br />";
echo "Nickname: " . $data['nickname'] . "<br />";
echo "E-mail: " . $data['email'] . "<br />";
echo "Mobile: " . $data['mobile'] . "<br />";
echo "Address: " . $data['address'] . "<br />";
echo "---------------------------------<br />";
}
} else {
echo mysql_error();
}
closeDB($db);
?>
การใช้งานทำได้โดยเปิดไฟล์ livesearch.html แล้วทดลองพิมพ์ข้อความใดๆ เข้าไป ก็จะเห็นผลลัพท์ที่เกิดขึ้นครับ
