วันอาทิตย์ที่ 17 มีนาคม พ.ศ. 2556

สอนทำ Autocomplete และ Autofill แสดงข้อมูลจากฐานข้อมูล

      สืบเนื่องมาจากบทความ สอนทำ Autocomplete ด้วย jQuery+AJAX ค้นหาหมวดสินค้า มีสมาชิกท่านหนึ่งถามผมว่า ถ้าเราเลือกที่ตัวเลือกใดตัวเลือกหนึ่งใน Autocomplete สามารถดึงข้อมูลรายละเอียดต่างๆที่เกี่ยวข้องมาแสดงแบบอัตโนมัติหรือ Autofill ในช่อง Input อื่นๆได้ไหม
     ผมจึงต้องขออนุญาตเขียนบทความสอนทำ 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);  //ปิดการเชื่อมต่อกับฐานข้อมูล
}
?> 

ผมคงไม่ต้องอธิบายอะไรเพิ่มเติมแล้ว เพราะเขียนคอมเม้นท์เอาไว้เกือบทุกบรรทัด ถ้าสงสัยหรือติดปัญหาก็สามารถสอบถามผมได้จากกล่องคอมเม้นท์ด้านล่างได้เลยครับ ครั้งหน้ามาดุกันครับว่า ผมจะสอนอะไร

32 ความคิดเห็น :

  1. เพิ่งขอโค้ดไปไม่กี่วัน.......ใจดีมีตัวอย่างให้ตัวเลยหรอครับ.
    ขอบคุณครับ........
    ผมคิดว่าคงมีประโยชน์มากกับใครอีกหลายคน

    ตอบลบ
    คำตอบ
    1. ยินดีครับผม ติดปัญหาตรงไหน สอบถามได้ครับ

      ลบ
  2. ไม่ระบุชื่อ3 เมษายน 2556 เวลา 10:54

    autocomplete ไม่ทำงานครับ สร้างตารางเหมือนกันหมดแล้วครับ

    ตอบลบ
    คำตอบ
    1. ให้ดูการตั้งชื่อ field ในฐานข้อมูลว่าถูกต้องหรือป่าว หรือคำสั่ง sql อาจจะผิดก็ได้ครับ

      ลบ
  3. ถ้ามี input หลาย ๆ ตัว สมมติคือ emp_name ทีละ 5 คน ในหน้าเดียว ทำยังไงเหรอคะ

    ตอบลบ
    คำตอบ
    1. ยังนึกภาพไม่ออกครับ ว่าจะเอาทั้ง 5 คนมาแสดงแบบไหน มีตัวอย่างให้ดูไหมครับ

      ลบ
  4. อ๋อ คือแบบ อยากจะให้มันมี input ที่ ให้มัน autocomplete ได้หลาย ๆ ช่องอ่ะค่ะ แต่ในตัวอย่าง มันมีตัวแปร $( "#emp_name" ).autocomplete( ที่ ได้ค่าเดียว แต่ทีนี้ ลองประยุกต์ อยากจะให้มัน auto ได้ทุก ช่อง input เลย มันทำไมไ่ด้อ่ะค่ะ อยากจะทราบว่า จะต้องทำยังไงเหรอคะ ลองแทรกโง่ ๆ แบบ "#emp_name,#other,#other2 มันก็ไม่ได้ คงไม่ใช่แบบนี้แน่ ๆ เลย เนาะ รบกวนหน่อยนะคะ T^T

    ตอบลบ
    คำตอบ
    1. ลองดูตัวอย่างตามนี้ครับ

      http://stackoverflow.com/questions/6385937/jquery-ui-autocomplete-multiple-input-controls-with-multiple-json-sources

      และนี่ครับ ให้กดที่ Run ก่อนแล้วเปิด Firebug และเลือกแท็บ Console เป็น Enable ก็จะเห็นการส่งค่าของมันครับ
      http://jsfiddle.net/salman/YsxHJ/

      ลบ
    2. และศึกษาตามเว็บนี้ดูนะครับ
      http://www.aliaspooryorik.com/blog/index.cfm/e/posts.details/post/adding-data-to-jquery-ui-autocomplete-342

      ลบ
  5. ทำได้แล้วค่ะ ขอบคุณมากค่ะ ^ ^

    >>http://jsfiddle.net/salman/YsxHJ/ อันนี้แจ๋วไปเลยค่ะ

    ตอบลบ
  6. ค่า term ที่ส่งไป อ่ะ ครับ ส่ง ตรงไหนหรอครับ แล้วเป็นค่าอะไรอ่ะครับ

    ตอบลบ
    คำตอบ
    1. มันเป็นค่าParameterที่ jQuery UI AutoComplete สร้างให้ครับ

      ลบ
  7. ขอถามหน่อยครับบบ ทำมัยรันบน localhost ทำได้ แต่รันบนเซิฟเวอร์จริง ทำไม่ได้อ่าครับ

    ตอบลบ
    คำตอบ
    1. คำสั่งในส่วนของการเชื่อมต่อกับฐานข้อมูลหรือส่วนของการคิวรี่ข้อมูลผิดหรือป่าวครับ
      ของเช็คการกำหนดรหัสผ่านฐานข้อมูลหรือคำสั่ง select ดูครับ

      ลบ
    2. ไม่ระบุชื่อ4 พฤษภาคม 2557 เวลา 02:13

      เป็นเหมือนกันเลยค่ะ ไม่มีเออเร่อ แต่ไม่ออก ไอค่อนโหลดอย่างเดียว แต่ไม่มีอะไรออกมา เป็นเพราะอะไรคะ ทีแรกนึกว่าเป็นเพระาโฮส เลยเปลี่ยนโฮสไปใช้อีกเจ้าก็ยังเหมือนเดิมเลยค่ะ

      ลบ
    3. ไม่ระบุชื่อ4 พฤษภาคม 2557 เวลา 02:14

      * แต่ใน localhost ออกนะคะ

      ลบ
    4. ไม่ระบุชื่อ4 พฤษภาคม 2557 เวลา 03:47

      ขอโทษค่ะ สะเพร่าเอง ลืมเปลี่ยน connect db ในไฟล์ 2 (show)ให้ ชี้ไปที่โฮส แฮ่ๆ เขินจัง

      ลบ
  8. ขอบคุณครับ รบกวนอีกครั้งน่ะครับ
    ผมลองทำตามที่บอกแล้วครับ เปลี่ยนไปใช้ include ไฟล์เชื่อมต่อ Database กะ เขียน code เข้าไปตรงๆ ก้อไม่สามารถทำได้ หรือเซิฟเวอร์มันไม่รองรับ jquery , Ajax อ่าคับ

    ตอบลบ
    คำตอบ
    1. ทุกเซิร์ฟเวอร์รองรับหมดครับ พอจะใช้ FireBug เป็นไหมครับ ถ้าใช้เป็นช่วยส่ง หน้าเออเร่อที่ FireBug แจ้งให้ผมดูด้วยครับ ขอบคุณครับ

      ลบ
    2. หรือลองส่งลิงค์ที่มีปัญหาบนHostมาให้ดูก็ได้ครับ

      ลบ
    3. ขอบคุณน่ะครับ ที่คอยช่วยเหลือมาตลอด
      ไฟล์ที่มีปัญหาอยู่ที่ http://songkhla.nhso.go.th/complain/hos1.php
      ผมแนบไฟล์รูปที่ Capture กะ Source Code ไว้ให้ด้วยน่ะครับ
      https://drive.google.com/file/d/0B-6wdyTUqkr6QVg0OHUwcEhtQWs/edit?usp=sharing

      ลบ
    4. สงสัยโฮสของน้องใช้ 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) . '}';
      }
      }
      }

      ลบ
    5. ขอบคุณมากๆ คับบบ เด่วผมจะลองดูครับ ยังไงถ้าไม่ได้อีก ขอรบกวนอีกครั้งน่ะครับ ^_^

      ลบ
    6. ได้แล้วคับบบบ ขอบคุณมากเรยยยยยย

      ลบ
  9. ใน localhost รันได้ แต่ใน server ไม่ได้ค่ะ รันบน AppServ Apache2.2 php5 ฐานข้อมูลเป็น phpMyAdmin - 2.10.3

    ตอบลบ
    คำตอบ
    1. ถ้าดูตามความคิดเห็นข้างบน เห็นทำได้กันหลายคนนะครับ น้องลองCaptureหน้าจอ ส่งมาให้ดูหน่อยครับ

      ลบ
  10. มัน Error แจ้งว่า Uncaught ReferenceError: $ is not defined(anonymous function) @ detail.html:102 คือใน code ตั้งแต่ $(function() เลย

    ตอบลบ
  11. ขอสอบถามอีกครั้งน่ะครับ

    ทาง web server ได้ update เวอร์ชั่น 4 เป็น 5 จากเดิมที่เคยรันได้ ตอนนี้มันขึ้น error ครับ

    Error in my_thread_global_end(): 1 threads didn't exit

    ไม่แน่ใจว่าต้องแก้ไขอย่างไรบ้างครับ

    ตอบลบ
  12. ในหน้าตอน show dในส่วนของ epartment ตอนนนี้คือ เเสดงค่าเป็น id อยู่ เเล้วถ้าจะให้เเสดงเป็น ชื่อเเทนยังไงครับ

    ตอบลบ
  13. รบกวนสอบถามครับ
    ถ้าผมต้องการ ดึงข้อมูลจาก 3 Table (employee , department , division )
    employee : DIVI_ID , DEPT_ID
    department : DEPT_ID และ DEPT_Name)
    division : DIVI_ID และ DIVI_Name
    แต่ผม ไม่ได้ใช้เป็น Select
    ต้องใช้โค้ดอะไรหรอ ครับ ที่ให้แปลงจาก ตัวเลข เป็น ชื่อ

    ตอบลบ