สอนทำ Autocomplete และ Autofill แสดงข้อมูลจากฐานข้อมูล
ผมจึงต้องขออนุญาตเขียนบทความสอนทำ Autocomplete และ Autofill ให้อ่านกันไปเลยครับ เพราะวิธีทำก็ไม่ยากอะไรเลย เราจะใช้ Autocomplete ของ jQuery UI นะครับ ผมจะไม่ใช้ Autocomplete ที่ผมสร้างขึ้นเองและได้สอนจากบทความก่อนมาดัดแปลง เพราะขี้เกียจและยอมรับว่าฝีมือยังกากมาก ^^”” ในเมื่อมันมี Plugin ขั้นเทพอย่าง jQuery UI ของ jQuery ให้ใช้ แล้วไยต้องมาเขียนโค๊ดเองให้ปวดกบาลทำไมครับ ว่าไหม!!!
1.อันดับแรกให้สร้างฐานข้อมูลตามนี้ จะมีเทเบิล employee (พนักงาน) กับ department (แผนก)
2.เราจะใช้ภาษา PHP เพื่อดึงข้อมูลจากฐานข้อมูล MySQL มาแสดงครับ ให้สร้างไฟล์ขึ้นมา 2 ไฟล์ ชื่อ employee_auto.php กับ employee_show.php
ไฟล์ employee_auto.php เป็นไฟล์ที่เราจะใส่โค๊ด Autocomplete ให้ไฟล์นี้ครับ แล้วส่งค่าไปเรียกใช้ข้อมูลจาก employee_show.php ให้พิมพ์โค๊ดดังนี้
<!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" />
<title>สอน Auto Complete And Audo Fill แสดงข้อมูลจากฐานข้อมูล</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.20/themes/start/jquery-ui.css" type="text/css" media="all" />
<!-- เรียกไฟล์ css ของ jquery ui -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<!-- เรียกไฟล์ jquery -->
<script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js" type="text/javascript"></script>
<style>
.ui-autocomplete-loading {
background: white url('ui-anim_basic_16x16.gif') right center no-repeat;/*แสดงตัวโหลด*/
}
.ui-corner-all{
font-size:14px;
}
</style>
<script>
$(function() {
$( "#emp_name" ).autocomplete({//กำหนดให้ทำงานที่ ชื่อ-สกุล โดยเรากำหนด id ให้ Input ชื่อ emp_name
source: "employee_show.php",//เรียกข้อมูลจากไฟล์ employee_show.php โดยจะส่งparams ชื่อ term ไปด้วย
minLength: 2,//ทำงานเมื่อพิมพ์ตั้งแต่ 2 ตัวอักษรขึ้นไป
select: function( event, ui ) {//เมื่อกดเลือกที่ Auto Complete ก็ให้แสดง Auto Fill ใน Input ต่างๆดังนี้
$('#emp_email').val(ui.item.email);//แสดงอีเมล
$('#emp_address').val(ui.item.address);//แสดงที่อยู่
$('#emp_phone').val(ui.item.phone);//แสดงเบอร์โทร
$('#emp_image').html('<img src="employee_images/'+ui.item.image+'" />');//แสดงรูปของพนักงาน
$.each( $('select#department_id>option') , function(){
if($(this).val()==ui.item.department){
$(this).attr("selected",true);
}else{
$(this).attr("selected",false);
}
});
}
})
});
</script>
<?php
$connect=mysql_connect('localhost','root','root');
mysql_select_db('db_exshop');
mysql_query('SET NAMES utf8');
//แสดงแผนกใน Select menu
$rs_department=mysql_query('SELECT * FROM department ORDER BY department_name ASC') or die(mysql_error());
?>
</head>
<body>
<table width="600" border="1" align="center">
<tr>
<td>ชื่อ-สกุล</td>
<td><input name="emp_name" type="text" id="emp_name" size="30" /></td>
</tr>
<tr>
<td>แผนก</td>
<td>
<select name="department_id" id="department_id">
<option value="">Select Value</option>
<?php while($show_department=mysql_fetch_assoc($rs_department)){?>
<option value="<?=$show_department['department_id']?>">
<?=$show_department['department_name']?>
</option>
<?php }?>
</select></td>
</tr>
<tr>
<td>รูปประจำตัว</td>
<td><div id="emp_image"></div></td>
</tr>
<tr>
<td>อีเมล</td>
<td><input name="emp_email" type="text" id="emp_email" size="30" /></td>
</tr>
<tr>
<td valign="top">ที่อยู่</td>
<td>
<textarea name="emp_address" id="emp_address" cols="45" rows="5"></textarea></td>
</tr>
<tr>
<td>เบอร์โทร</td>
<td><input name="emp_phone" type="text" id="emp_phone" size="20" /></td>
</tr>
</table>
</body>
</html>
2.ไฟล์ employee_show.php คือไฟล์ที่ทำหน้าที่ นำข้อมูลส่ง มาจาก employee_auto.php มาค้นหาข้อมูลจากฐานข้อมูลของพนักงาน ซึ่งค่าParamที่ส่งมาจะชื่อ term ให้พิมพ์โค๊ดดังนี้
<?php
header('content-type: text/html; charset: utf-8');//รองรับภาษาไทย
if(!empty($_GET["term"])){//ค่าที่ส่งมาไม่ว่าง
$connect=mysql_connect('localhost','root','root');//เชื่อมต่อกับฐานข้อมูล
mysql_select_db('db_exshop');//เลือก Database
mysql_query('SET NAMES utf8');//แสดงข้อมูลรองรับภาษาไทย
$param = $_GET["term"]; //รับParamที่ส่งมา ชื่อ term
$query = mysql_query("SELECT * FROM employee WHERE emp_name LIKE '%$param%' "); //ค้นหาข้อมูลพนักงานในเทเบิล employee
for ($x = 0, $numrows = mysql_num_rows($query); $x < $numrows; $x++) {
$row = mysql_fetch_assoc($query);
$employee[$x] = array("id"=>$row['emp_id'],"label" => $row["emp_name"],"value"=>$row['emp_name'],
"department"=>$row['department_id'],"email"=>$row['emp_email'],"phone"=>$row['emp_phone'],
"address"=>$row['emp_address'],"image"=>$row['emp_image']);
}
$response = json_encode($employee) ; //แปลงข้อมูลใน $employee ซึ่งเป็นตัวแปรแบบ Array ให้้เป็น JSON
echo $response; //echo ข้อมูลออกมา เพื่อให้หน้า request สามารถดึงข้อมูลไปใช้ได้
mysql_close($connect); //ปิดการเชื่อมต่อกับฐานข้อมูล
}
?>
ผมคงไม่ต้องอธิบายอะไรเพิ่มเติมแล้ว เพราะเขียนคอมเม้นท์เอาไว้เกือบทุกบรรทัด ถ้าสงสัยหรือติดปัญหาก็สามารถสอบถามผมได้จากกล่องคอมเม้นท์ด้านล่างได้เลยครับ ครั้งหน้ามาดุกันครับว่า ผมจะสอนอะไร
เพิ่งขอโค้ดไปไม่กี่วัน.......ใจดีมีตัวอย่างให้ตัวเลยหรอครับ.
ตอบลบขอบคุณครับ........
ผมคิดว่าคงมีประโยชน์มากกับใครอีกหลายคน
ยินดีครับผม ติดปัญหาตรงไหน สอบถามได้ครับ
ลบautocomplete ไม่ทำงานครับ สร้างตารางเหมือนกันหมดแล้วครับ
ตอบลบให้ดูการตั้งชื่อ field ในฐานข้อมูลว่าถูกต้องหรือป่าว หรือคำสั่ง sql อาจจะผิดก็ได้ครับ
ลบถ้ามี input หลาย ๆ ตัว สมมติคือ emp_name ทีละ 5 คน ในหน้าเดียว ทำยังไงเหรอคะ
ตอบลบยังนึกภาพไม่ออกครับ ว่าจะเอาทั้ง 5 คนมาแสดงแบบไหน มีตัวอย่างให้ดูไหมครับ
ลบอ๋อ คือแบบ อยากจะให้มันมี input ที่ ให้มัน autocomplete ได้หลาย ๆ ช่องอ่ะค่ะ แต่ในตัวอย่าง มันมีตัวแปร $( "#emp_name" ).autocomplete( ที่ ได้ค่าเดียว แต่ทีนี้ ลองประยุกต์ อยากจะให้มัน auto ได้ทุก ช่อง input เลย มันทำไมไ่ด้อ่ะค่ะ อยากจะทราบว่า จะต้องทำยังไงเหรอคะ ลองแทรกโง่ ๆ แบบ "#emp_name,#other,#other2 มันก็ไม่ได้ คงไม่ใช่แบบนี้แน่ ๆ เลย เนาะ รบกวนหน่อยนะคะ T^T
ตอบลบลองดูตัวอย่างตามนี้ครับ
ลบhttp://stackoverflow.com/questions/6385937/jquery-ui-autocomplete-multiple-input-controls-with-multiple-json-sources
และนี่ครับ ให้กดที่ Run ก่อนแล้วเปิด Firebug และเลือกแท็บ Console เป็น Enable ก็จะเห็นการส่งค่าของมันครับ
http://jsfiddle.net/salman/YsxHJ/
และศึกษาตามเว็บนี้ดูนะครับ
ลบhttp://www.aliaspooryorik.com/blog/index.cfm/e/posts.details/post/adding-data-to-jquery-ui-autocomplete-342
ทำได้แล้วค่ะ ขอบคุณมากค่ะ ^ ^
ตอบลบ>>http://jsfiddle.net/salman/YsxHJ/ อันนี้แจ๋วไปเลยค่ะ
ยินดีด้วยครับ ^__^
ลบค่า term ที่ส่งไป อ่ะ ครับ ส่ง ตรงไหนหรอครับ แล้วเป็นค่าอะไรอ่ะครับ
ตอบลบมันเป็นค่าParameterที่ jQuery UI AutoComplete สร้างให้ครับ
ลบขอถามหน่อยครับบบ ทำมัยรันบน localhost ทำได้ แต่รันบนเซิฟเวอร์จริง ทำไม่ได้อ่าครับ
ตอบลบคำสั่งในส่วนของการเชื่อมต่อกับฐานข้อมูลหรือส่วนของการคิวรี่ข้อมูลผิดหรือป่าวครับ
ลบของเช็คการกำหนดรหัสผ่านฐานข้อมูลหรือคำสั่ง select ดูครับ
เป็นเหมือนกันเลยค่ะ ไม่มีเออเร่อ แต่ไม่ออก ไอค่อนโหลดอย่างเดียว แต่ไม่มีอะไรออกมา เป็นเพราะอะไรคะ ทีแรกนึกว่าเป็นเพระาโฮส เลยเปลี่ยนโฮสไปใช้อีกเจ้าก็ยังเหมือนเดิมเลยค่ะ
ลบ* แต่ใน localhost ออกนะคะ
ลบขอโทษค่ะ สะเพร่าเอง ลืมเปลี่ยน connect db ในไฟล์ 2 (show)ให้ ชี้ไปที่โฮส แฮ่ๆ เขินจัง
ลบขอบคุณครับ รบกวนอีกครั้งน่ะครับ
ตอบลบผมลองทำตามที่บอกแล้วครับ เปลี่ยนไปใช้ include ไฟล์เชื่อมต่อ Database กะ เขียน code เข้าไปตรงๆ ก้อไม่สามารถทำได้ หรือเซิฟเวอร์มันไม่รองรับ jquery , Ajax อ่าคับ
ทุกเซิร์ฟเวอร์รองรับหมดครับ พอจะใช้ FireBug เป็นไหมครับ ถ้าใช้เป็นช่วยส่ง หน้าเออเร่อที่ FireBug แจ้งให้ผมดูด้วยครับ ขอบคุณครับ
ลบหรือลองส่งลิงค์ที่มีปัญหาบนHostมาให้ดูก็ได้ครับ
ลบขอบคุณน่ะครับ ที่คอยช่วยเหลือมาตลอด
ลบไฟล์ที่มีปัญหาอยู่ที่ http://songkhla.nhso.go.th/complain/hos1.php
ผมแนบไฟล์รูปที่ Capture กะ Source Code ไว้ให้ด้วยน่ะครับ
https://drive.google.com/file/d/0B-6wdyTUqkr6QVg0OHUwcEhtQWs/edit?usp=sharing
สงสัยโฮสของน้องใช้ php เวอร์ชั่น 4 ครับ
ลบให้เพิ่มฟังก์ชั่นนี้เข้าไปครับ
if (!function_exists('json_encode'))
{
function json_encode($a=false)
{
if (is_null($a)) return 'null';
if ($a === false) return 'false';
if ($a === true) return 'true';
if (is_scalar($a))
{
if (is_float($a))
{
// Always use "." for floats.
return floatval(str_replace(",", ".", strval($a)));
}
if (is_string($a))
{
static $jsonReplaces = array(array("\\", "/", "\n", "\t", "\r", "\b", "\f", '"'), array('\\\\', '\\/', '\\n', '\\t', '\\r', '\\b', '\\f', '\"'));
return '"' . str_replace($jsonReplaces[0], $jsonReplaces[1], $a) . '"';
}
else
return $a;
}
$isList = true;
for ($i = 0, reset($a); $i < count($a); $i++, next($a))
{
if (key($a) !== $i)
{
$isList = false;
break;
}
}
$result = array();
if ($isList)
{
foreach ($a as $v) $result[] = json_encode($v);
return '[' . join(',', $result) . ']';
}
else
{
foreach ($a as $k => $v) $result[] = json_encode($k).':'.json_encode($v);
return '{' . join(',', $result) . '}';
}
}
}
ขอบคุณมากๆ คับบบ เด่วผมจะลองดูครับ ยังไงถ้าไม่ได้อีก ขอรบกวนอีกครั้งน่ะครับ ^_^
ลบได้แล้วคับบบบ ขอบคุณมากเรยยยยยย
ลบยินดีด้วยครับ
ลบใน localhost รันได้ แต่ใน server ไม่ได้ค่ะ รันบน AppServ Apache2.2 php5 ฐานข้อมูลเป็น phpMyAdmin - 2.10.3
ตอบลบถ้าดูตามความคิดเห็นข้างบน เห็นทำได้กันหลายคนนะครับ น้องลองCaptureหน้าจอ ส่งมาให้ดูหน่อยครับ
ลบมัน Error แจ้งว่า Uncaught ReferenceError: $ is not defined(anonymous function) @ detail.html:102 คือใน code ตั้งแต่ $(function() เลย
ตอบลบขอสอบถามอีกครั้งน่ะครับ
ตอบลบทาง web server ได้ update เวอร์ชั่น 4 เป็น 5 จากเดิมที่เคยรันได้ ตอนนี้มันขึ้น error ครับ
Error in my_thread_global_end(): 1 threads didn't exit
ไม่แน่ใจว่าต้องแก้ไขอย่างไรบ้างครับ
ในหน้าตอน show dในส่วนของ epartment ตอนนนี้คือ เเสดงค่าเป็น id อยู่ เเล้วถ้าจะให้เเสดงเป็น ชื่อเเทนยังไงครับ
ตอบลบรบกวนสอบถามครับ
ตอบลบถ้าผมต้องการ ดึงข้อมูลจาก 3 Table (employee , department , division )
employee : DIVI_ID , DEPT_ID
department : DEPT_ID และ DEPT_Name)
division : DIVI_ID และ DIVI_Name
แต่ผม ไม่ได้ใช้เป็น Select
ต้องใช้โค้ดอะไรหรอ ครับ ที่ให้แปลงจาก ตัวเลข เป็น ชื่อ