สอนทำ Autocomplete ด้วย jQuery+AJAX ค้นหาหมวดสินค้า
บทความนี้จะสอนทำ 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 ดาว ให้กับสินค้า ครับ
ตอบลบ