 |
autocomplete multiple values โดยดึงค่ามาจาก database |
| |
 |
|
|
 |
 |
|
ต้องการทำ 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 :
4444 |
Reply :
4 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ลองดึงค่ามาใส่ไว้ใน 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 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
วิธีตามคุณ 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 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ขอบคุณนะครับ เดี๋ยวลองดูก่อนครับ
|
| |
|
|
| |
| Date :
2012-02-11 12:25:21 |
By :
altrakung |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
