Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,027

HOME > PHP > PHP Forum > autocomplete multiple values โดยดึงค่ามาจาก database

autocomplete multiple values โดยดึงค่ามาจาก database

เริ่มหัวข้อใหม่

hanaka

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

ต้องการทำ autocomplete mutiple values โดยดึงค่ามาจาก database น่ะครับ
ตอนนี้ที่หาข้อมูลได้มา มันไม่สามารถดึงค่ามาจาก database ได้ หากเราต้องการดึงค่ามาจาก database เราต้องทำอย่างไรครับ
ใครพอทราบวิธี ช่วยแนะนำด้วยครับ ขอบคุณมากครับ
Code (PHP)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Autocomplete - Multiple values</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.1.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.autocomplete.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++",
			"Clojure",
			"COBOL",
			"ColdFusion",
			"Erlang",
			"Fortran",
			"Groovy",
			"Haskell",
			"Java",
			"JavaScript",
			"Lisp",
			"Perl",
			"PHP",
			"Python",
			"Ruby",
			"Scala",
			"Scheme"
		];
		function split( val ) {
			return val.split( /,\s*/ );
		}
		function extractLast( term ) {
			return split( term ).pop();
		}

		$( "#tags" )
			// don't navigate away from the field on tab when selecting an item
			.bind( "keydown", function( event ) {
				if ( event.keyCode === $.ui.keyCode.TAB &&
						$( this ).data( "autocomplete" ).menu.active ) {
					event.preventDefault();
				}
			})
			.autocomplete({
				minLength: 0,
				source: function( request, response ) {
					// delegate back to autocomplete, but extract the last term
					response( $.ui.autocomplete.filter(
						availableTags, extractLast( request.term ) ) );
				},
				focus: function() {
					// prevent value inserted on focus
					return false;
				},
				select: function( event, ui ) {
					var terms = split( this.value );
					// remove the current input
					terms.pop();
					// add the selected item
					terms.push( ui.item.value );
					// add placeholder to get the comma-and-space at the end
					terms.push( "" );
					this.value = terms.join( ", " );
					return false;
				}
			});
	});
	</script>
</head>
<body>

<div class="demo">

<div class="ui-widget">
	<label for="tags">Tag programming languages: </label>
	<input id="tags" size="50" />
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.</p>
<p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p>
</div><!-- End demo-description -->

</body>
</html>

Tag : PHP, MySQL, jQuery

ประวัติการแก้ไข
2012-02-10 14:51:02

Date : 2012-02-10 14:50:03

By : altrakung

View : 4277

Reply : 4

No. 1

โปรแกรมมั่ว

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

ลองดึงค่ามาใส่ไว้ใน input ซึ่งทำ hidden ไว้แล้ว ค่อยดึ่งค่าไปใส่ไว้่ใน availableTags
Code (PHP)

$var = '';
$sql = mysql_query("select * from table ");
while($x = mysql_fetch_assoc($sql))
{
  $var .= " ' ".$x[xx]." ', ";  // เอาข้อมูลมาต่อกัน

}

echo '<input type="hidden" id="xx" value=" ['. $var.'] " />';

ที่ จาวาสคริปต์

Code (PHP)

var  availableTags = $('#xx').val();

Date : 2012-02-10 15:08:36

By : randOmizE

No. 2

Likito

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

วิธีตามคุณ random ถ้าข้อมูลเป็นหลักหมื่นๆ หรือมากกว่านั้น
การดึงข้อมูลทั้งหมดมาใส่ในตัวแปร ตัวเดียว คงจะกิน สเปค เครื่องพอสมควร

ลองดูตามนี้ครับ ผมยังไม่ได้ลองทำตามดูนะ
http://www.simonbattersby.com/blog/jquery-ui-autocomplete-with-a-remote-database-and-php/

ถ้าแก้แล้วน่าจะเป็น ประมาณนี้ครับ

Code (PHP)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Autocomplete - Multiple values</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.1.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.autocomplete.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		function split( val ) {
			return val.split( /,\s*/ );
		}
		function extractLast( term ) {
			return split( term ).pop();
		}

		$( "#tags" )
			// don't navigate away from the field on tab when selecting an item
			.bind( "keydown", function( event ) {
				if ( event.keyCode === $.ui.keyCode.TAB &&
						$( this ).data( "autocomplete" ).menu.active ) {
					event.preventDefault();
				}
			})
			.autocomplete({
				minLength: 0,
				source: 'search.php',
				focus: function() {
					// prevent value inserted on focus
					return false;
				},
				select: function( event, ui ) {
					var terms = split( this.value );
					// remove the current input
					terms.pop();
					// add the selected item
					terms.push( ui.item.value );
					// add placeholder to get the comma-and-space at the end
					terms.push( "" );
					this.value = terms.join( ", " );
					return false;
				}
			});
	});
	</script>
</head>
<body>

<div class="demo">

<div class="ui-widget">
	<label for="tags">Tag programming languages: </label>
	<input id="tags" size="50" />
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.</p>
<p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p>
</div><!-- End demo-description -->

</body>
</html>

แก้ไข ตรง source เป็น path ที่เราจะดึง ข้อมูลจาก database ครับ เช่น search.php

ในไฟล์ search.php
Code (PHP)

//หลังจากเชื่อม database
$term = trim(strip_tags($_GET['term']));

$qstring = "SELECT name FROM table WHERE name LIKE '%".$term."%'";
$result = mysql_query($qstring);

while ($row = mysql_fetch_array($result))
{
		$data[]; $row["name"]; // ค่าที่จะนำมาแสดง
}
echo json_encode($row_set);

ลองดูครับ ผมก็ยังไม่ได้ลองเหมือนกัน ลองแก้คร่าวๆดูเท่านั้น

แต่จริงๆแล้ว ถ้าโหลด jqueryui มามันก้มี demo อยู่ในนั้นแล้ว ลองเข้าไปเปิดๆ ดูตัวอย่างก็ได้ครับ

Date : 2012-02-10 16:01:35

By : Likito

No. 3

โปรแกรมมั่ว

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

ตอบความคิดเห็นที่ : 2 เขียนโดย : Likito เมื่อวันที่ 2012-02-10 16:01:35

รายละเอียดของการตอบ ::

ได้ความรู้ใหม่ครับ Like ๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆ

Date : 2012-02-10 16:24:54

By : randOmizE

No. 4

hanaka

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

ขอบคุณนะครับ เดี๋ยวลองดูก่อนครับ

Date : 2012-02-11 12:25:21

By : altrakung

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : autocomplete multiple values โดยดึงค่ามาจาก database

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก