ผมจึงต้องขออนุญาตเขียนบทความสอนทำ 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
ต้องใช้โค้ดอะไรหรอ ครับ ที่ให้แปลงจาก ตัวเลข เป็น ชื่อ