กรอกฟอร์มขณะพิมพ์ด้วย 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).'"}]';

	?>