1 พฤษภาคม 2555

Internship, DAY 8-9 [วิธีทำ Auto-Complete แบบง่ายๆ]

จริงๆบล็อกตอนนี้ควรจะเขียนเสร็จเป็นชาติ แต่เนื่องจากติดบั๊กที่เดิมไม่หายซักที พอแก้ได้ (ซึ่งวิธีแก้ได้นี่มัน อยู่ใต้จมูกเราเลยนี่หว่า = =") แถมพอแก้บั๊กเสร็จปุ๊บ ป่วยทันที (เพราะเข้าห้องแอร์ หนาวโคตร ออกห้องแอร์ เหงื่อท่วม ป่วยเลย TwT) ทำให้ Internship, DAY 9 ต้องนอนแหม็บอยู่บ้าน เดี๋ยวเอาหวัดไปติดพี่ที่ทำงาน พอวันแรงงานก็หายป่วยแล้วแหละ(มั้ง?) เลยมาเขียนบล็อกดีกว่า

หนนี้จึงไม่อยากพล่ามเรื่องรายละเอียดในวันฝึกงานมากนัก และขอไม่เขียนอ้างอิงถึงเว็บต่างๆที่ไปหาข้อมูลมา (เพราะมันเยอะมากจนจำไม่ไหว ฮ่าๆ)

Auto-Complete สำหรับคนที่มีฐานข้อมูลของตัวเองนะจ้ะ จุ๊บๆ

วิธีทำ Auto-Complete ฉบับมั่วซั่วของผัดเผ็ด

  1. จงเข้าเว็บ jQueryUI ไปที่ Download มองตรงขวามือ เลือก Theme ตามใจชอบก่อน แล้วก็กด Download โลด ! (หรือถ้ายังไม่รู้ว่าหน้าตามันเป็นยังไง เข้าไปเลือก Theme ก่อนโหลดเลย)
  2. จากนั้นจะได้ไฟล์ชื่อ jQuery-ui-1.8.19.custom.zip พอแตกไฟล์แล้วก็จะเจอ 3 Folder [ css,  development-bundle, js ] และ index.html ลองเข้าไปสำรวจเล่นดูก่อนก็ได้ ที่เราบอกว่าวิธีแก้อยู่ใต้จมูกนี่เองก็เพราะเราไม่เข้าไปศึกษาก่อนนี่แหละ
  3. สร้าง Folder ว่างๆสำหรับงานของคุณขึ้นมา ถ้ามี AppServ ก็เอาไปยัดไว้ใน AppServ >> www ก็ได้ อย่างเราตั้งชื่อมันว่า Internship ฮี่ๆ จริงๆ ไม่ต้องแยกก็ได้ แต่เดี๋ยวงงกับงานอื่นอะ 1 งาน 1 Folder เลยดีกว่า
  4. copy สิ่งต่อไปนี้จาก File ที่โหลดมาได้ ลงไปใน Folder ว่างๆของเรา
    • css
    • js
    • development-bundle > themes
    • development-bundle > ui
    • development-bundle > demos > demos.css <= ไม่ใช้ก็ได้ไม่เป็นไร
    • development-bundle > autocomplete > default.html  <= โค้ดที่เราจะเอามาปู้ยี่ปู้ยำในวันนี้
  5. พิจารณาหน้าตาโค้ด default.html กันก่อน คัดมาเฉพาะส่วนที่จำเป็น ก่อนทำการแก้ไขสังเกตว่าส่วน Head มันยาวมาก แล้วก็สำคัญมากด้วย เราจะยุ่งกับโค้ดส่วนนี้เท่านั้นสำหรับการทำ Auto-Complete

    2. <html lang="en">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <title>jQuery UI Autocomplete - Default functionality</title>
    6.     <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    7.     <script src="../../jquery-1.7.2.js"></script>
    8.     <script src="../../ui/jquery.ui.core.js"></script>
    9.     <script src="../../ui/jquery.ui.widget.js"></script>
    10.     <script src="../../ui/jquery.ui.position.js"></script>
    11.     <script src="../../ui/jquery.ui.autocomplete.js"></script>
    12.     <link rel="stylesheet" href="../demos.css">
    13.     <script>
    14.     $(function() {
    15.         var availableTags = [
    16.             "AppleScript",
    17.             "Asp",
    18.             "BASIC",
    19. .........................................................................................
    20.             "Scheme"
    21.         ];
    22.         $( "#tags" ).autocomplete({
    23.             source: availableTags
    24.         });
    25.     });
    26.     </script>
    27. </head>
    28. <body>
    29.    
    30. <div class="demo">
    32. <div class="ui-widget">
    33.     <label for="tags">Tags: </label>
    34.     <input id="tags" />
    35. </div>
    37. </div>
    38. </body>
    39. </html>
  6. ในส่วน head ให้เอาโค้ดส่วนนี้ออกไป

    1.     <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    2.     <script src="../../jquery-1.7.2.js"></script>
    3.     <script src="../../ui/jquery.ui.core.js"></script>
    4.     <script src="../../ui/jquery.ui.widget.js"></script>
    5.     <script src="../../ui/jquery.ui.position.js"></script>
    6.     <script src="../../ui/jquery.ui.autocomplete.js"></script>
    7.     <link rel="stylesheet" href="../demos.css">

    แล้วแทนที่ด้วยโค้ดนี้ (สังเกตโค้ดบรรทัดแรก  ui-lightness เป็นชื่อ Theme ที่เราโหลดมา ถ้าโหลดตัวอื่นก็ใส่ชื่ออื่น ดูตามใน Folder เลย)

    1.     <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="Stylesheet" />  
    2.     <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    3.     <script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
    4.     <script src="ui/jquery.ui.core.js"></script>
    5.     <script src="ui/jquery.ui.widget.js"></script>
    6.     <script src="ui/jquery.ui.position.js"></script>
    7.     <script src="ui/jquery.ui.autocomplete.js"></script>
    8.     <link rel="stylesheet" href="demos.css">
  7. ลบโค้ดส่วน var availableTags = [blablabla]; ออกไปจากสารบบ
  8. สังเกตว่าเมื่อทำข้อ 7 เสร็จไปแล้ว ส่วนที่แสดงข้างล่างก็จะบรึ้ม เพราะไม่มีอะไรให้อ้างอิง

            $( "#tags" ).autocomplete({
                source: availableTags
            });

    เปลี่ยนตัวแถบแดงนั้นเป็น "xxx.php" เสีย จะได้เชื่อมกับ DB ของเราได้ เท่านี้ก็เรียบร้อย (อย่าลืม double quote ต้องใส่ด้วย เป็น)

            $( "#tags" ).autocomplete({
                source: "xxx.php"
            });
  9. มาดูไส้ในของ xxx.php กันเถอะว่ามีอะไรบ้าง (โค้ดมันหล่นหายไปเฉยเลยอะ ใส่เพิ่มให้แบบโง่ๆ 555)

    2.     $p = $_GET["term"];    //ส่วนนี้สำคัญมาก โดยเฉพาะคำว่า 'term' ห้ามเปลี่ยนเป็นอย่างอื่นเด็ดขาด!
    3.     $host = "localhost";
    4.     $user = "root";
    5.     $password = "yourpassword";  
    6.     $connect = mysql_connect($host,$user,$password);
    7.     $db='yourDBname';
    8.     mysql_query("SET NAMES UTF8");     //จะได้แสดงภาษาไทยได้เพราะ DB เราเป็นภาษาไทย
    9.     mysql_select_db($db,$connect) or die(mysql_error());
    10.    
    11.  // ทำ query โดยใช้ข้อความที่กรอกมาใน textbox ($p) เป็นเงื่อนไขด้วย
    12.     $sql = "select distinct field
    13.             from table
    14.             where field like '%{$p}%'  
    15.             order by field";   
    16.     $result = mysql_query($sql);
    17.    
    18.  // วิธีการทำ Array เลียนแบบของเก่า (availableTags) แบบไร้อารยธรรม  
    19.     $first = true;
    20.     echo "[";                  
    21.     while($rs=mysql_fetch_assoc($result))
    22.     {
    23.         $p = $rs["field"];
    24.         if($first == true)
    25.             $first=false;
    26.         else
    27.             echo ',';
    28.         echo '"'.$p.'"';
    29.    
    30.     }
    31.     echo "]";
    32. ?>
  10. เสร็จเรียบร้อยแล้วก็ลองทดสอบตามรูปเลย ผลที่ได้ก็จะออกมาตามรูปนั้นแหละ แต่ DB ไม่เหมือนกันเน้อ

สังเกตว่า เราไม่ได้เซ็ตให้ขึ้นเฉพาะคำที่ขึ้นต้นด้วย 'ก' แต่ให้ขึ้นทุกคำที่มีตัว 'ก' ยิ่งพิมพ์เยอะเท่าไหร่ ก็จะยิ่งโชว์ผลลัพธ์น้อยลงเท่านั้น


บล็อกถัดไป คงจะทำให้ auto-complete มันฉลาดกว่านี้ เพราะจริงๆเงื่อนไขมันเยอะนะเออ คิดว่าคงต้องปั่นคืนนี้แหละ เพราะงานไม่ค่อยเดินเลย

และมีหนุ่มบัญชีนายหนึ่งเกิดเฮี้ยนอยากฝึกงานสายคอมฯ ว่าจะไปลองขอพี่ต้องดู ถ้าขอได้ มีเฮแน่


เหอๆๆๆ
Posted by at
Labels: , ,
Location: มหาวิทยาลัยเกษตรศาสตร์ ถนนจันทรสถิตย์ ลาดยาว จตุจักร กรุงเทพมหานคร 10900 ประเทศไทย

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

  1. Unknown1 พฤษภาคม 2555 เวลา 22:15

    template ส่วนที่เป็นโค้ดแกหน้าตาบวมมากอ่ะ เหมือนมันจะไม่ยุบตามหน้าบลอกแก
    แกนี่แปลกแฮะ ยิ่งป่วยยิ่งมีสาระ (- -")

    ตอบลบ
    คำตอบ
    1. Unknown1 พฤษภาคม 2555 เวลา 23:38

      เราพยายามใช้พวก syntaxhighlighter บนบล็อกนี้อะ แต่มันดัน Edit HTML ไม่ได้ เพราะเป็น Dynamic หาตัวอย่างกี่เจ้าๆก็ยัดไม่สำเร็จ สุดท้ายใช้เว็บ http://quickhighlighter.com/ Gen ทีเดียว ก๊อปแปะแบบโง่ๆ ดันเอาอยู่ ตัวอักษรก็เลยบวมๆอย่างที่เห็นอะ

      ลบ
  2. imTiNEY2 พฤษภาคม 2555 เวลา 08:32

    โค้ดมาเต็ม : D

    ตอบลบ

สมัครสมาชิก: ส่งความคิดเห็น (Atom)