วันเสาร์ที่ 17 ธันวาคม พ.ศ. 2554

สอนทำ Autocomplete ด้วย jQuery+AJAX ค้นหาหมวดสินค้า

          ช่วงนี้ผมค่อนข้างจะมีเวลาว่างเยอะเลยครับ ทำให้ผมมีเวลาเข้ามาอัพเดทบทความในBlogนี้ค่อนข้างจะบ่อยซักหน่อยครับ และผมก็คิดเอาไว้นานแล้วว่าจะสอนใช้เทคนิค AJAX มาประยุกต์ใช้กับ Web E-Commerce เนื่องจากเนื้อหาที่สอนในบทความสอนทำ Web E-Commerceก่อนๆหน้า ผมก็ได้สอนไปเยอะมากแล้ว จนแทบจะไม่มีอะไรจะสอนแล้วครับ ^_^ ดังนั้นบทความต่อไป ผมจะสอนการใช้เทคนิคต่างๆในการทำ Web E-Commerce ก็แล้วนะครับ โดยผมอาจจะใช้ Code จากบทความก่อนหน้าที่เคยสอนไปแล้วมาปรับแก้นิดหน่อยนะครับ คุณจะได้ทบทวนCodeเก่าที่ผมเคยได้สอนไปด้วยยังไงล่ะครับ ^_^
          บทความนี้จะสอนทำ Autocomplete ด้วย jQuery+AJAX  (คล้ายๆของGoogle แต่ไม่เหมือนนะครับ ^__^) ครับ
โดยเราจะทำการเขียนCodeเองเลย โดยที่ไม่ต้องพึ่ง Plugin ของ jQuery ที่มีให้ดาวน์โหลดกันเกลื่อนกลาดบนWeb และ การทำ Autocomplete เองก็ไม่ใช่ระบบที่ยุ่งยากซับซ้อนอะไรเลยครับ เพราะเรามี jQuery มาช่วยเขียนสคริปต์ จาวาสคริปต์ ทำให้ช่วยลดการเขียนสคริปต์ที่ซับซ้อนลงไปเยอะเลยครับ และที่สำคัญ เราจะรู้สึกภูมิใจม๊ากมากครับ ถ้าเราเป็นคนเขียนCodeเอง โดยที่ไม่ได้ไปเอาของใครมาแก้ไขเป็นของตัวเอง (^0^)

เริ่มกันเลยนะครับ ให้สร้างไฟล์ขึ้นมา 2 ไฟล์ครับ ตั้งชื่อ autocomplete1.php และ autocomplete2.php
ไฟล์ autocomplete1.php ->สำหรับเขียนสคริปต์ Autocomplete ด้วย jQuery โดยเราจะใช้  AJAX Library เพื่อ request ข้อมูลหมวดสินค้า จากไฟล์ autocomplete2.php ครับ ให้พิมพ์Codeดังนี้

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="../js/jquery.js"></script>
        <script type="text/javascript">
            // 2011 Autocomplete jQuery AJAX By php-for-ecommerce.blogspot.com
            $.autocomplete = function(ele) {
                if (ele.val() != "") {//หากค่าใน textfield ไม่ว่าง
                    $.tauto_box(ele);//เรียกใช้funcionนี้ เพื่อสร้างDialog box Auto Commplete ขึ้นมา แต่จะถูกซ่อนเอาไว้ก่อน
                    $.ajax({//เรียก function ajax ขึ้นมา
                        url: 'autocomplete2.php',
                        type: 'POST', //ส่งค่าแบบ POST
                        data: {keyword: ele.val()}, //ใช้ตัวแปรชื่อ keyword ส่งค่า($_POST['keyword'])
                        beforeSend: function() {//ก่อนส่งค่า
                            $.loadingshow(ele); //แสดงตัว loading
                        },
                        success: function(data) {//หากส่งข้อมูลสมบูรณ์
                            $('#tauto_box').show();//แสดงdialog box
                            $('#tauto_box').html(data);//เอาค่าที่ response กลับมาใส่ใน dialog box
                            $.loadinghide(ele);//ซ่อนตัว loading
                            $('#tauto_box ul li').bind('click', function(event) {//หากมีการคลิกที่ text ใน dialog box แถวใดแถวหนึ่ง
                                if (event.target == this) {//ตรวจสอบการคลิกว่าถูกต้อง
                                    ele.val($(this).html())//เอาค่าที่คลิกเลือกใส่ลงใน textfield
                                    $('#tauto_boxback').remove();//ลบdialog boxซะ
                                }
                            });
                        }});
                } else {//หากไม่เจอค่าใน textfield
                    $.loadinghide(ele);//ซ่อนตัว loading
                    $('#tauto_boxback').remove();//ลบdialog box
                }
                $('#tauto_boxback,#' + ele.attr('id')).bind('click', function(event) {
                    //หากมีการคลิกที่ dialogและ textfieldแสดงว่าให้ ลบ dialog ซะ
                    if (event.target == this) {
                        $('#tauto_boxback').remove();//ลบ dialog ซะ
                    }
                });
            }
            $.tauto_box = function(ele) {//function แสดง dialog
                if ($('#tauto_boxback').length != 0) {
                    $('#tauto_boxback').remove();
                }
                $('body').append('<div id="tauto_boxback"><div id="tauto_box"></div></div>');
                $('#tauto_boxback').css('top', ((ele.position().top + ele.height()) + 7) + 'px');
                $('#tauto_box').css({'width': ele.width(), 'left': ele.position().left + 'px'});
            }
            $.loadingshow = function(ele) {//แสดงตัว loading
                ele.addClass('loading');
            }
            $.loadinghide = function(ele) {//ซ่อนตัว loading
                ele.removeClass('loading');
            }
            /*$(document).ready(function(){
             $("#tautox").keyup(function(){//ตรวจจับการkeyตัวอักษรที่ textfield
             $.autocomplete($(this));//เรียกใช้ function Auto Complete
             });
             });*/
        </script>
        <title>ทำ Autocomplete ด้วย jQuery+AJAX ค้นหาหมวดสินค้า</title>
        <style>
            body {
                margin: 0px;
                font-family: Tahoma, Geneva, sans-serif;
                font-size: 14px;
                background: url(mission_impossible_.jpg) no-repeat center top;
            }
            .loading {
                background: url(loader.gif);/*แก้ไขตัว loading ที่นี่*/
                background-repeat: no-repeat;
                background-position: right;
            }
            #tauto_boxback {
                position: absolute;
                width: 100%;
                height: 100%;
            }
            #tauto_box {
                background: #F60;
                border: #999;
                color: #FFF;
                width: 100%;
                display: none;
                padding: 5px;
                position: absolute;
                float: left;
            }
            #tauto_box ul {
                list-style: none;
                margin: 0px auto;
                padding: 5px;
                cursor: pointer;
            }
            #tauto_box ul li {
                margin: 0px auto;
                padding: 5px;
            }
            #tauto_box ul li:hover {
                background: #F90;
            }
        </style>
    </head>
    <body>
        <div style="margin:0px auto;width:550px;">
            <div style="margin-top:50px;">ค้นหาหมวดสินค้า
                <input id="tautox" name="tautox" type="textfield" size="50" onkeyup="$.autocomplete($(this))"/>
                เช่น <strong>ตุ๊กตา,หมี</strong> </div>
        </div>
    </body>
</html>
จาก code ข้างบน เราจะเห็นวิธีเรียกใช้งาน คือคำสั่ง
<input id="tautox" name="tautox" onkeyup="$.autocomplete($(this));" size="50" type="textfield" />


ไฟล์ autocomplete2.php รับค่า request จากไฟล์ autocomplete1.php มา โดยส่งมากับตัวแปรแบบ POST ชื่อ keyword ($_POST[‘keyword’]) แล้วส่งผลลัพธุ์กลับไปยังไฟล์(autocomplete1.php)ที่ถูกเรียกใช้ โดยผลลัพธุ์ที่ส่งไปต้องอยู่ในรูปแบบของ Tag <ul> นะครับ ให้เขียนcode ดังนี้

<?php
//2011 Script By php-for-ecommerce.blogspot.com
$conn=mysql_connect('localhost','root','root');//เชื่อมต่อกับฐานข้อมูล
mysql_select_db('db_exshop');//เลื่อกฐานข้อมูล
mysql_query("SET NAMES 'utf8'");
$rsShowCategory=mysql_query("SELECT cg_name FROM tb_category WHERE cg_name LIKE '%".$_REQUEST['keyword']."%' ORDER BY cg_name ASC");//ดึงข้อมูลล่าสุด10แถวจากเทเบิล
if(mysql_num_rows($rsShowCategory)>0){
echo '<ul>';
while($ShowCategory=mysql_fetch_array($rsShowCategory)){
echo '<li>'.$ShowCategory[0].'</li>';
}
echo '</ul>';
}else{
echo 'ไม่่พบข้อมูล'; 
}
mysql_free_result($rsShowCategory);
mysql_close($conn);
?>

17 ความคิดเห็น :

  1. เพิ่มเติมนะครับ!!! ผมได้รวบรวมลิงค์ของเว็บไซต์ที่แจกPlugin Autocomplete ที่น่าสนใจ ให้คุณลองนำมาประยุกต์ใช้กับเว็บไซต์ของคุณดูครับ
    http://jqueryui.com/demos/autocomplete/
    http://www.devbridge.com/projects/autocomplete/jquery/
    http://www.codenothing.com/archives/jquery/auto-complete/
    http://www.ajaxdaddy.com/demo-jquery-autocomplete.html
    http://www.nodstrum.com/2007/09/19/autocompleter/
    http://beski.wordpress.com/2009/11/20/jquery-php-mysql-ajax-autocomplete/
    http://ajaxdump.com/2010/08/11/10-cool-auto-complete-scripts-using-ajaxjquerymootoolsprototype/

    ตอบลบ
  2. ไม่ระบุชื่อ18 กันยายน 2555 เวลา 14:01

    ผมทำได้แล้ว คั๊บ ขอบ คุณ มาก คั๊บ มีประโยชน์ มาก คั๊บ

    ตอบลบ
  3. ค้นหาชื่อหลายฟิล์ด ทำยังไงค่ะ คือมันออกแต่ ชื่อ ฟิลด์แรกตลอดเลย

    ตรง ("SELECT filed1 filed2 FROM tb_category WHERE filed1 LIKE '%".$_REQUEST['keyword']."%' or filed2 LIKE '%".$_REQUEST['keyword']."%' ORDER BY cg_name ASC");

    ตอบลบ
  4. ลืมเครื่องหมาย , คั่นฟิลด์ครับ ลองดูครับ ถ้าไม่ได้ยังไง แจ้งมาอีกได้ครับ
    ("SELECT filed1,filed2 FROM tb_category WHERE filed1 LIKE '%".$_REQUEST['keyword']."%' or filed2 LIKE '%".$_REQUEST['keyword']."%' ORDER BY cg_name ASC");

    ตอบลบ
    คำตอบ
    1. ค่ะ อันที่จริงก็ เขียนแบบนั้นล่ะค่ะ แต่ก็ไม่ออกอยู่ แต่ที่โพสไป ลืม ใส่ ,

      ลบ
    2. คำสั่งก็ถูกนะครับ แต่มันแสดงผลแค่ field1 หรอครับ หรือว่าผมเข้าใจคำถามผิดหว่า
      ถ้าเป็นผม ผมจะเขียนคำสั่งประมาณนี้ครับ

      สมมุติผมส่งมาแบบ GET ค้นหาTable Product นะครับ

      SELECT name,detail FROM tb_product WHERE name LIKE '%".$_GET['keyword']."%' OR detail LIKE '%".$_GET['keyword']."%' ORDER BY name ASC

      การทำงานมันจะเป็นแบบนี้ครับ ตรงเงื่อนไข WHERE ถ้ามันเจอ keyword ในฟิลด์ name มันจะหยุด จะไม่เข้าไปค้นหาใน detail แล้ว เพราะเราใช้คำสั่ง OR แต่ถ้าใช้ AND มันจะต้องเข้าไปค้นหาทั้ง 2 ฟิลด์ แต่น้องใช้คำสั่ง OR น่ะถูกแล้ว (T + F = T) แต่ถ้าเป็น AND เงื่อนไขต้องเจอทั้งสองฟิลด์ครับถึงจะเป็นจริง (T+T=T,T+F=F)

      ผมจะใช้คำสั่งประมาณนี้แหละครับ เพื่อใช้ค้นหาหลายฟิลด์

      ลบ
  5. ใช้ค่ะ คือ สิ่งที่ต้องการคือ ให้มันค้นชื่อใน ฟิลด์ detail ด้วย ค่ะ มันแสดงแต่ name ตลอดอ่ะค่ะ

    ตอบลบ
    คำตอบ
    1. แสดงได้ทีละฟิลด์เท่านั้นครับผม ถ้าจะให้แสดง 2 ฟิลด์ จะต้องทำค้นหา 2 ช่องครับ

      ลบ
  6. แล้วทำเป็นโค้ด Autocomplete and autofill เหมือนตัวอย่างนี้ได้รึเปล่า...

    http://examples.codecharge.com/Ajax/Autocomplete.php

    ตอบลบ
    คำตอบ
    1. ตัวนี้ทำไม่ได้ครับ จะต้องปรับโค๊ดอีกครับ ทำให้มันส่งค่ามาอีกครั้งนึง โดยจับEventจากAutoCompleteตัวเลือกที่เราเลือก เพื่อแสดงแบบ autofill ใน input อื่นๆครับ

      ลบ
    2. ขอบคุณครับ.........ผมหาโค้ดนี้นานมาก....แต่ยังหาไม่ได้เลยครับ...............
      ถ้าหาได้จะเอามาเผยแพร่นะครับ.........ผมก็ไม่เก่งเท่าไหร่........
      แค่เอาโค้ด......มาแก้เก่ง *-* ขอบคุณอีกครั้งครับ........

      ลบ
    3. ถ้าว่างๆจะเขียนบทความให้อ่านครับ

      ลบ
  7. ขอบคุณมากครับ
    ขอบคุณที่เป็นแสงเทียนส่องสว่างให้ ในยามที่ผมกำลังมืดมิดครับ

    ตอบลบ
    คำตอบ
    1. ด้วยความยินครับ ขอบคุณที่แวะมาเยี่ยมเยือนครับ

      ลบ
  8. ขอบคุณมากครับ จะลองนำไปใช้ครับ ว่าแต่ ตัวนี้ลอง ใน localhost ก่อนได้ใช่ไหมครับพี่

    ตอบลบ
  9. ไม่ระบุชื่อ13 ตุลาคม 2558 เวลา 12:17

    อยากได้โค้ด ทำ Rating 5 ดาว ให้กับสินค้า ครับ

    ตอบลบ