Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > PHP > PHP Forum > [TIP] : jQuery Autocomplete (PHP, MySQL)



 

[TIP] : jQuery Autocomplete (PHP, MySQL)

 



Topic : 090054



โพสกระทู้ ( 889 )
บทความ ( 11 )



สถานะออฟไลน์
Facebook Blogger



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
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2013-01-30 19:32:04 By : popnakub View : 5114 Reply : 6
 

 

No. 1



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

จัดไปครับ






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-01-31 08:58:15 By : mr.win
 


 

No. 2



โพสกระทู้ ( 889 )
บทความ ( 11 )



สถานะออฟไลน์
Facebook Blogger

จริงๆผมเองก็พึ่งจะได้ option หลายๆอย่าง jQuery ajax ก็ตอนทำ autocompleteนี้ครับ พอดีพอทำได้บ้างก็เลย เอามาฝากครับ
โดยส่วนก็ยังไม่ค่อยเข้าใจหลักการเท่าไหร่ก็กำลังศึกษาอยู่เหมือนกันครับ หวังว่าจะเป็นประโยชน์กันครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-01-31 11:38:07 By : popnakub
 

 

No. 3

Guest


ถ้าต้องการ Search 2 field ต้องทำยังไงหรอคะ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-10-11 14:35:00 By : oom
 


 

No. 4

Guest


แล้วถ้าPK เป็น varcharล่ะคะ ต้องเขียนแบบไหน ใช้ได้เหมือนกันป่าว
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-11-12 19:41:11 By : dekD
 


 

No. 5



โพสกระทู้ ( 889 )
บทความ ( 11 )



สถานะออฟไลน์
Facebook Blogger

ตอบความคิดเห็นที่ : 3 เขียนโดย : oom เมื่อวันที่ 2013-10-11 14:35:00
รายละเอียดของการตอบ ::
Code (PHP)
$sql =" SELECT * FROM tb_student WHERE Name LIKE '%".$_GET["term"]."%' OR Name1 LIKE '%".$_GET["country"]."%' ";

ถ้าไม่เข้า mail มาถามได้ครับ geidtiphong_s[at]hotmail.com

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-11-12 20:09:50 By : geidtiphong
 


 

No. 6



โพสกระทู้ ( 889 )
บทความ ( 11 )



สถานะออฟไลน์
Facebook Blogger

ตอบความคิดเห็นที่ : 4 เขียนโดย : dekD เมื่อวันที่ 2013-11-12 19:41:11
รายละเอียดของการตอบ ::
ใช้ได้ครับ แต่แอบสงสัยนิดนึ่งครับทำไมต้องใช้ varchar เป็น PK หรือว่ากำหนด PK เองเหรอครับ ?

ถ้าไม่เข้า mail มาถามได้ครับ geidtiphong_s[at]hotmail.com

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-11-12 20:11:25 By : geidtiphong
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : [TIP] : jQuery Autocomplete (PHP, MySQL)
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 04
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่