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

มีคำถามจากบอร์ดถึงการค้นหาข้อมูลขณะพิมพ์ และนำข้อมูลที่ค้นหาเจอ(ข้อมูลอื่นๆที่เกี่ยวข้องกัน)มากรอกในฟอร์มอัตโนมัติ ด้วยการใช้ Ajax

ตัวอย่างนี้ผมใช้ GAJAX ในการค้นหา ซึ่งความต้องการตามตัวอย่างก็คือ พิมพ์ Username ในช่อง แล้วส่งไปทำการค้นหา(จากฐานข้อมูล) ด้วย Ajax หากพบข้อมูลที่ตรงกัน ให้นำข้อมูลอื่นๆ ของ user ที่พบเช่น ชื่อเรียก อีเมล์ (หรืออื่นๆ) กลับไปเติมที่ช่องข้อมูลอื่นๆด้วย

โค้ดด้านล่างเป็นส่วนของฟอร์ม และ Javascript ที่ใช้สำหรับการตรวจสอบ ดูคำอธิบายต่างๆได้ที่ในโค้ดเลยครับ อย่าลืม include gajax เข้าไปในเพจด้วยนะครับ

<form>

<p>Username : <input type="text" id="user" name="user" /><span id="result">&nbsp;</span></p>

<p>ลองพิมพ์คำว่า demon ลงในช่อง Username (ทีละตัว)</p>

<p>Email : <input type="text" id="email" name="email" /></p>

<p>Display Name : <input type="text" id="displayname" name="displayname" /></p>

</form>



<script type="text/javascript">

var doKeyUp = function(event){

    // input เจ้าของ event (user)

    var input = GEvent.element(event);

    // พื้นที่แสดงผลรูปรอโหลด

    var result = $E('result');

    // แสดงรูปรอโหลด เพื่อบอกว่ากำลังส่งข้อมูลไปตรวจสอบ

    result.innerHTML = '<img src="https://www.goragod.com/skin/img/wait.gif" alt="" />';

    // ajax ส่งข้อมูลไปตรวจสอบ

    var req = new GAjax();

    req.send('find.php' ,  'user=' + encodeURIComponent(input.value) , function(xhr) {

        result.innerHTML = '&nbsp;';

        var datas = xhr.responseText.toJSON();

        var prop, val;

        // วนลูปส่งข้อมูลมาแสดงตาม input ต่างๆ

        for (prop in datas[0]) {

            val = datas[0][prop];

            $E(prop).value = val;

        };

    });

}

// กำหนด event

$G('user').addEvent('keyup', doKeyUp);

</script>

PHP ไฟล์ find.php ตามตัวอย่างนี้ เป็นการจำลองการค้นหาข้อมูลจาก Array เท่านั้นนะครับ คุณอาจใช้การค้นหาข้อมูลด้วย วิธีอื่นก็ได้ตามข้อกำหนดบนเว็บไซต์ของคุณ จุดสำคัญของวิธีการนี้ก็คือการส่งข้อมูลที่พบตอบกลับในรูปของ JSON เท่านั้นครับ หากไม่พบค่าที่ต้องการ ก็ให้ตอบกลับเป็นค่าว่างกลับไป

<?php

    // สำหรับตรวจสอบในขณะกรอกข้อมูล

    header("content-type: text/html; charset=UTF-8");



    // กำหนดข้อมูล (ตัวอย่าง)

    $users = array('demo', 'demon');

    $emails = array('demo@goragod.com', 'demon@yahoo.com');

    $displaynames = array('ตัวอย่าง', 'Demon !');



    // ค่าที่ส่งมา

    $user = trim($_POST['user']);



    // ค้นหาข้อมูล

    $i = 0;

    while($i < count($users)){

        if($users[$i] == $user){

            break;

        }

        $i++;

    }



    // กำหนดค่าที่คืน

    $ret[] = 'email":"'.$emails[$i];

    $ret[] = 'displayname":"'.$displaynames[$i];



    // คืนค่าเป็น JSON

    echo '[{"'.implode('","', $ret).'"}]';

?>

ตัวอย่าง สามารถ View Source เพื่อดูโค้ดในส่วนของฟอร์มได้นะครับ