|
 |
| |
[TIP] : jQuery Autocomplete (PHP, MySQL) |
| |
 |
|
|
 |
 |
|
database
Code
CREATE TABLE `tb_student` (
`Id_std` int(5) NOT NULL auto_increment,
`Name` varchar(255) collate utf8_unicode_ci NOT NULL,
`Address` varchar(255) collate utf8_unicode_ci NOT NULL,
PRIMARY KEY (`Id_std`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=5 ;
--
-- dump ตาราง `tb_student`
--
INSERT INTO `tb_student` VALUES (1, 'LIGHTNING', 'CHONBURI');
INSERT INTO `tb_student` VALUES (2, 'HOPE', 'ROI-ET');
INSERT INTO `tb_student` VALUES (3, 'SNOW', 'CHIANG MAI');
INSERT INTO `tb_student` VALUES (4, 'SARAH', 'PATAYA');
default.php
Code (PHP)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Scrollable results</title>
<link rel="stylesheet" href="jQueryUI/redmond/jquery-ui-1.10.0.custom.css" />
<script src="jQueryUI/js/jquery-1.9.0.js"></script>
<script src="jQueryUI/js/jquery-ui-1.10.0.custom.js"></script>
<link rel="stylesheet" href="jQueryUI/development-bundle/themes/redmond/jquery-ui.css" />
<style>
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.ui-autocomplete-loading {
background: white url('jQueryUI/development-bundle/demos/autocomplete/images/ui-anim_basic_16x16.gif') right center no-repeat;
}
.ui-autocomplete{
max-height: 200px;
width: 600px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete{
height: 100px;
}
label{font-weight:bold;width:70px;display:inline-block;text-align:right;}
input[type="text"]{width:500px;}
#input_q{background-color:#CAE1FF;border:solid 1px #CCC;}
</style>
</head>
<body>
<div class="ui-widget">
<form id="form1" name="form1" method="post" action="" autocomplete=off>
<label>Zone : </label>
<select name="country" id="country">
<option value="0">--SELECT--</option>
<option value="1">LCB</option>
<option value="2">BKK</option>
</select><br /><br />
<label for="tags">Name : </label>
<input type="text" name="input_q" id="input_q" /><br /><br />
<label>ID : </label>
<input name="h_input_q" type="text" id="h_input_q" value="" /><br /><br />
<label style="vertical-align:top;">Address : </label>
<textarea name="txt_area" id="txt_area" rows="5" cols="50" /></textarea><br /><br /><br />
<input type="submit" value="Save" />
</form>
</div>
</body>
</html>
<script>
$(function(){
$("#input_q").focus().css("text-transform", "uppercase");
$("input[type='submit']").attr("disabled", true);
$("input[type='text']").click(function(){
$(this).select();
});
$("#input_q").keyup(function(){
var input = $("#input_q").val();
if(input == ""){
$("#h_input_q, #txt_area").val("");
$("input[type='submit']").attr("disabled", true);
}
});
$( "#input_q" ).autocomplete({ // ใช้งาน autocomplete กับ input text id=tags
minLength: 1, // กำหนดค่าสำหรับค้นหาอย่างน้อยเป็น 0 สำหรับใช้กับปุ่ใแสดงทั้งหมด
//source: "gdata.php", // กำหนดให้ใช้ค่าจากการค้นหาในฐานข้อมูล
source: function(request, response){
$.ajax({
url: "source_data.php",
dataType: "json",
data:{
term : request.term,
country : $('#country').val()//รับค่ามาจาก id=country
},
success: function(data){
response(data);
}
});
},
open:function(){ // เมื่อมีการแสดงรายการ autocomplete
var valInput=$(this).val(); // ดึงค่าจาก text box id=tags มาเก็บที่ตัวแปร
if(valInput!=""){ // ถ้าไม่ใช่ค่าว่าง
$(".ui-menu-item a").each(function(){ // วนลูปเรียกดูค่าทั้งหมดใน รายการ autocomplete
var matcher = new RegExp("("+valInput+")", "ig" );// ตรวจสอบค่าที่ตรงกันในแต่ละรายการ กับคำค้นหา
var s=$(this).text();
var newText=s.replace(matcher, "<b style=\"color:#CD2626\">$1</b>");//แทนค่าที่ตรงกันเป็นตัวหนา
$(this).html(newText); // แสดงรายการ autocomplete หลังจากปรับรูปแบบแล้ว
});
}
},
select: function( event, ui ){
$("input[type='submit']").attr("disabled", false);
$("#h_input_q").val(ui.item.id); // เก็บ id ไว้ใน hiden element ไว้นำค่าไปใช้งาน
$("#txt_area").val(ui.item.address);
alert(ui.item.country);
}
});
});
</script>
data_source.php
Code (PHP)
<?php
mysql_connect("localhost", "root", "1234") or die (mysql_error());
mysql_select_db("student_db") or die (mysql_error());
$country =$_GET["country"];
$sql =" SELECT * FROM tb_student WHERE Name LIKE '%".$_GET["term"]."%' ";
$qr = mysql_query($sql) or die (mysql_error());
$rows = mysql_num_rows($qr);
if($rows<=0){
$json_data[] = array("id"=>"0");
}else{
while($fetch = mysql_fetch_array($qr)){
$json_data[] = array("id"=>$fetch["Id_std"], "label"=>$fetch["Name"], "value"=>$fetch["Name"], "address"=>$fetch["Address"], "country"=>$country, );
}
}
$json = json_encode($json_data);
echo $json;
?>
Credit : ninenik.com
modify : koromankung[at]gmail.com
ถ้าใครอยากได้แบบ zip ก็เมลมาขอได้นะครับ
Tag : PHP, MySQL, HTML/CSS, jQuery, Windows
|
ประวัติการแก้ไข
2013-01-30 19:33:58
|
 |
 |
 |
 |
| Date :
2013-01-30 19:32:04 |
By :
popnakub |
View :
5247 |
Reply :
6 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
 จัดไปครับ
|
| |
|
|
| |
| Date :
2013-01-31 08:58:15 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
จริงๆผมเองก็พึ่งจะได้ option หลายๆอย่าง jQuery ajax ก็ตอนทำ autocompleteนี้ครับ พอดีพอทำได้บ้างก็เลย เอามาฝากครับ
โดยส่วนก็ยังไม่ค่อยเข้าใจหลักการเท่าไหร่ก็กำลังศึกษาอยู่เหมือนกันครับ หวังว่าจะเป็นประโยชน์กันครับ
|
| |
|
|
| |
| Date :
2013-01-31 11:38:07 |
By :
popnakub |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ถ้าต้องการ Search 2 field ต้องทำยังไงหรอคะ
|
| |
|
|
| |
| Date :
2013-10-11 14:35:00 |
By :
oom |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
แล้วถ้าPK เป็น varcharล่ะคะ ต้องเขียนแบบไหน ใช้ได้เหมือนกันป่าว
|
| |
|
|
| |
| Date :
2013-11-12 19:41:11 |
By :
dekD |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 02
|
