กรอกฟอร์มขณะพิมพ์ด้วย 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 เปิดดู 9,115 ป้ายกำกับ PHPAjaxGAjax

เรื่องที่เกี่ยวข้อง

^