กรอกฟอร์มขณะพิมพ์ด้วย Ajax (ตอนที่ 2)
คำถามเกี่ยวกับการกรอกฟอร์ขณะพิมพ์มีมากมายเลยครับ ผมเลยมาเขียนตัวอย่างเพิ่มเติมให้อีกอัน ซึ่งมีลักษณะในการค้นหาข้อความด้วย Ajax แล้วส่งกลับมาแสดงผลข้อมูลที่ค้นเจอ โดยมีข้อมูลที่สามารถค้นหาได้ภายในฟอร์มมากกว่า 1 รายการ บนเงื่อนไขต่างๆกัน
// กำหนดข้อมูล (ตัวอย่าง)
if (isset($_POST['user'])) {
// คืนค่าเป็น JSON
โค้ดในหน้าหลัก เกี่ยวกับฟอร์มและ Javascript โค้ดเต็มๆ ให้ดูจากตัวอย่าง แล้ว View Source เลยครับ ต้อง include GAjax ด้วย
ข้อสังเกตุสำหรับโค้ดนี้ก็คือ ผมใช้ค่า name ที่ได้จาก event ในตอนกดคีย์ ส่งไปพร้อมกับ value เพื่อให้ PHP ใช้คัดแยกว่าจะค้นหาจากอะไร (อาจเลือกวิธีอื่นก็ได้แล้วแต่ความถนัด)
<p>Username : <input type="text" id="user" name="user" /><span id="resultUser"> </span></p>
<p>ลองพิมพ์ คำว่า demon ทีละตัว หรือตัวอักษรบางตัวของ demon เช่น mo (เพื่อค้นหาคำใกล้เคียง) หรือกรอกคำอื่นๆ</p>
<p>Email : <input type="text" id="email" name="email" /><span id="resultEmail"> </span></p>
<p>ลองพิมพ์ คำว่า demo@yahoo.com ทีละตัว</p>
</form>
<script type="text/javascript">
var doKeyUp = function(event){
var input = GEvent.element(event);
var req = new GAjax();
// ajax ส่งข้อมูลไปตรวจสอบ
req.send('find2.php' , input.name + '=' + encodeURIComponent(input.value) , function(xhr) {
var datas = xhr.responseText.toJSON();
var prop, val;
for (prop in datas[0]) {
val = datas[0][prop];
$E(prop).innerHTML = val;
};
});
}
// กำหนด event ของ input ทั้ง 2 ตัว
$G('user').addEvent('keyup', doKeyUp);
$G('email').addEvent('keyup', doKeyUp);
</script>
โค้ดหน้า find2.php สำหรับค้นหาข้อความ ตัวอย่างนี้ใช้ strpos เพื่อสามารถค้นหาข้อความใกล้เคียงได้ ตัวอย่างนี้จะเห็นได้ว่า มีการแยกการค้นหาออกเป็น 2 ส่วน คือ ค้นหาเมื่อกรอก user มา หรือ ค้นหาเมื่อกรอก email มา
ส่วนในตอนคืนค่ากลับ ผมใช้ ค่า id ที่ต้องการแสดงผลเพื่อส่งค่ากลับเลย ทำให้ไม่ต้องเสียเวลาในการตรวจสอบ id หรือ หา id ที่ต้องการแสดงผลอีก แต่วิธีนี้ก็เหมาะกับบางสถานะการณ์เท่านั้นนะครับ เนื่องจากค่า id ที่ใช้ส่งกลับต้องมีอยู่จริง ไม่งั้น Error
// สำหรับตรวจสอบในขณะกรอกข้อมูล
header("content-type: text/html; charset=UTF-8");
$users = array('demo', 'demon');
$emails = array('demo@goragod.com', 'demo@yahoo.com');
// ส่ง user มา ค้นหา
$user = trim($_POST['user']);
// ค้นหาข้อมูล
$i = 0;
while ($i < count($users)) {
// ค้นหาบางส่วนของคำ
if (strpos($users[$i], $user) !== FALSE) {
break;
}
$i++;
}
// กำหนดค่าที่คืน
// ใช้คีย์ เป็นค่าของพื้นที่ที่ต้องการแสดงผล
$ret[] = 'resultUser":"'.$users[$i];
} elseif (isset($_POST['email'])) {
// ส่ง email มา ค้นหา
$email = trim($_POST['email']);
// ค้นหาข้อมูล
$i = 0;
while ($i < count($emails)) {
// ค้นหาบางส่วนของคำ
if (strpos($emails[$i], $email) !== FALSE) {
break;
}
$i++;
}
// กำหนดค่าที่คืน
// ใช้คีย์ เป็นค่าของพื้นที่ที่ต้องการแสดงผล
$ret[] = 'resultEmail":"'.$emails[$i];
}
echo '[{"'.implode('","', $ret).'"}]';
?>