บทความนี้จะสอนทำ 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); ?>
เพิ่มเติมนะครับ!!! ผมได้รวบรวมลิงค์ของเว็บไซต์ที่แจก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/
ผมทำได้แล้ว คั๊บ ขอบ คุณ มาก คั๊บ มีประโยชน์ มาก คั๊บ
ตอบลบค้นหาชื่อหลายฟิล์ด ทำยังไงค่ะ คือมันออกแต่ ชื่อ ฟิลด์แรกตลอดเลย
ตอบลบตรง ("SELECT filed1 filed2 FROM tb_category WHERE filed1 LIKE '%".$_REQUEST['keyword']."%' or filed2 LIKE '%".$_REQUEST['keyword']."%' ORDER BY cg_name ASC");
ลืมเครื่องหมาย , คั่นฟิลด์ครับ ลองดูครับ ถ้าไม่ได้ยังไง แจ้งมาอีกได้ครับ
ตอบลบ("SELECT filed1,filed2 FROM tb_category WHERE filed1 LIKE '%".$_REQUEST['keyword']."%' or filed2 LIKE '%".$_REQUEST['keyword']."%' ORDER BY cg_name ASC");
ค่ะ อันที่จริงก็ เขียนแบบนั้นล่ะค่ะ แต่ก็ไม่ออกอยู่ แต่ที่โพสไป ลืม ใส่ ,
ลบคำสั่งก็ถูกนะครับ แต่มันแสดงผลแค่ 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)
ผมจะใช้คำสั่งประมาณนี้แหละครับ เพื่อใช้ค้นหาหลายฟิลด์
ใช้ค่ะ คือ สิ่งที่ต้องการคือ ให้มันค้นชื่อใน ฟิลด์ detail ด้วย ค่ะ มันแสดงแต่ name ตลอดอ่ะค่ะ
ตอบลบแสดงได้ทีละฟิลด์เท่านั้นครับผม ถ้าจะให้แสดง 2 ฟิลด์ จะต้องทำค้นหา 2 ช่องครับ
ลบแล้วทำเป็นโค้ด Autocomplete and autofill เหมือนตัวอย่างนี้ได้รึเปล่า...
ตอบลบhttp://examples.codecharge.com/Ajax/Autocomplete.php
ตัวนี้ทำไม่ได้ครับ จะต้องปรับโค๊ดอีกครับ ทำให้มันส่งค่ามาอีกครั้งนึง โดยจับEventจากAutoCompleteตัวเลือกที่เราเลือก เพื่อแสดงแบบ autofill ใน input อื่นๆครับ
ลบขอบคุณครับ.........ผมหาโค้ดนี้นานมาก....แต่ยังหาไม่ได้เลยครับ...............
ลบถ้าหาได้จะเอามาเผยแพร่นะครับ.........ผมก็ไม่เก่งเท่าไหร่........
แค่เอาโค้ด......มาแก้เก่ง *-* ขอบคุณอีกครั้งครับ........
ถ้าว่างๆจะเขียนบทความให้อ่านครับ
ลบจัดให้แล้วนะครับผม ^0^ -> สอนทำ Autocomplete และ Autofill แสดงข้อมูลจากฐานข้อมูล
ลบขอบคุณมากครับ
ตอบลบขอบคุณที่เป็นแสงเทียนส่องสว่างให้ ในยามที่ผมกำลังมืดมิดครับ
ด้วยความยินครับ ขอบคุณที่แวะมาเยี่ยมเยือนครับ
ลบขอบคุณมากครับ จะลองนำไปใช้ครับ ว่าแต่ ตัวนี้ลอง ใน localhost ก่อนได้ใช่ไหมครับพี่
ตอบลบอยากได้โค้ด ทำ Rating 5 ดาว ให้กับสินค้า ครับ
ตอบลบ