กรอกฟอร์มขณะพิมพ์ด้วย Ajax (ตอนที่ 2)

คำถามเกี่ยวกับการกรอกฟอร์ขณะพิมพ์มีมากมายเลยครับ ผมเลยมาเขียนตัวอย่างเพิ่มเติมให้อีกอัน ซึ่งมีลักษณะในการค้นหาข้อความด้วย Ajax แล้วส่งกลับมาแสดงผลข้อมูลที่ค้นเจอ โดยมีข้อมูลที่สามารถค้นหาได้ภายในฟอร์มมากกว่า 1 รายการ บนเงื่อนไขต่างๆกัน

โค้ดในหน้าหลัก เกี่ยวกับฟอร์มและ Javascript โค้ดเต็มๆ ให้ดูจากตัวอย่าง แล้ว View Source เลยครับ ต้อง include GAjax ด้วย

ข้อสังเกตุสำหรับโค้ดนี้ก็คือ ผมใช้ค่า name ที่ได้จาก event ในตอนกดคีย์ ส่งไปพร้อมกับ value เพื่อให้ PHP ใช้คัดแยกว่าจะค้นหาจากอะไร (อาจเลือกวิธีอื่นก็ได้แล้วแต่ความถนัด)

<form>
<p>Username : <input type="text" id="user" name="user" /><span id="resultUser">&nbsp;</span></p>
<p>ลองพิมพ์ คำว่า demon ทีละตัว หรือตัวอักษรบางตัวของ demon เช่น mo (เพื่อค้นหาคำใกล้เคียง) หรือกรอกคำอื่นๆ</p>
<p>Email : <input type="text" id="email" name="email" /><span id="resultEmail">&nbsp;</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
<?php
 // สำหรับตรวจสอบในขณะกรอกข้อมูล
 header("content-type: text/html; charset=UTF-8");

 // กำหนดข้อมูล (ตัวอย่าง)
 $users = array('demo', 'demon');
 $emails = array('demo@goragod.com', 'demo@yahoo.com');

 if (isset($_POST['user'])) {
  // ส่ง 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];
 }

 // คืนค่าเป็น JSON
 echo '[{"'.implode('","', $ret).'"}]';
?>

ผู้เขียน goragod โพสต์เมื่อ 10 ก.ย. 2553 เปิดดู 12,547 ป้ายกำกับ PHPAjaxGAjax
^