พฤษภาคม 27, 2020, 09:45:32 PM *
ยินดีต้อนรับคุณ, บุคคลไม่รู้ว่าใคร กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น
หน้า: [1]   ลงล่าง
  พิมพ์  
ใครเทพ Ajax มาช่วยที  (อ่าน 2808 ครั้ง)
ขั้น 3 : ซุปเปอร์สตาร์ *** ออฟไลน์ ออฟไลน์ พลังสะสม: 557
ตุลาคม 06, 2009, 09:24:46 AM
ผลงาน: 57
amdev
แฟนคลับ
ขั้น 3 : ซุปเปอร์สตาร์
***

ผลงาน: 57
ออฟไลน์ ออฟไลน์

พลังสะสม: 557

เว็บไซต์
« เมื่อ: ตุลาคม 06, 2009, 09:24:46 AM »
คือจะทำ Ajax Auto suggest ครับ คือก็ไม่ได้มีความรู้เรื่อง Ajax เลย ลองโหลดๆมาลองดู
ติดปัญหาคือการแสดงผลกับภาษาไทย ครับ คือผมจะดึงข้อมูลจากฐานข้อมูล
ซึ่งฐานข้อมูลเป็นรายชื่อของบุคคลากรกับไอดีประจำตัวบุคคล
โจทย์ก็คือ เวลาพิมพ์ชื่อลงไปในช่องค้นหาก็ให้มันแสดงคำที่ใกล้เคียงกันและก็แสดงไอดีของคนนั้นด้วย
ตอนนี้คือมันก็แสดงอ่ะครับแต่แสดงชื่อเป็น ????????????????????

ฐานข้อมูลผมก็เซตเป็น UTF-8 ตรงเฮดเดอร์ก็เซต <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
ผมใช้ตัว jquery-1.2.1.pack.js
Code index.html
อ้างถึง
<!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>Ajax Auto Suggest</title>

<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
   function lookup(inputString) {
      if(inputString.length == 0) {
         // Hide the suggestion box.
         $('#suggestions').hide();
      } else {
         $.post("rpc.php", {queryString: ""+inputString+""}, function(data){
            if(data.length >0) {
               $('#suggestions').show();
               $('#autoSuggestionsList').html(data);
            }
         });
      }
   } // lookup
   
   function fill(thisValue) {
      $('#inputString').val(thisValue);
      setTimeout("$('#suggestions').hide();", 200);
   }
</script>

<style type="text/css">
   body {
      font-family: Helvetica;
      font-size: 11px;
      color: #000;
   }
   
   h3 {
      margin: 0px;
      padding: 0px;   
   }

   .suggestionsBox {
      position: relative;
      left: 30px;
      margin: 10px 0px 0px 0px;
      width: 300px;
      background-color: #212427;
      -moz-border-radius: 7px;
      -webkit-border-radius: 7px;
      border: 2px solid #000;   
      color: #fff;
   }
   
   .suggestionList {
      margin: 0px;
      padding: 0px;
   }
   
   .suggestionList li {
      
      margin: 0px 0px 3px 0px;
      padding: 3px;
      cursor: pointer;
   }
   
   .suggestionList li:hover {
      background-color: #659CD8;
   }
</style>

</head>

<body>


   <div>
      <form>
         <div>
            Type your county:
            

            <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
         </div>
         
         <div class="suggestionsBox" id="suggestions" style="display: none;">
            <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
            <div class="suggestionList" id="autoSuggestionsList">
               &nbsp;
            </div>
         </div>
      </form>
   </div>

</body>
</html>

code rpc.php เอาไว้ติดต่อกับฐานข้อมูล

อ้างถึง
<?
// mysqli('localhost', 'yourUsername', 'yourPassword', 'yourDatabase');
   $db = new mysqli('localhost', 'root' ,'root', 'db_expert');
   mysql_query("SET NAMES UTF8");
   
   if(!$db) {
      // Show error if we cannot connect.
      echo 'ERROR: Could not connect to the database.';
   } else {
      // Is there a posted query string?
      if(isset($_POST['queryString'])) {
         $queryString = $db->real_escape_string($_POST['queryString']);
         
         // Is the string length greater than 0?
         
         if(strlen($queryString) >0) {
            // Run the query: We use LIKE '$queryString%'
            // The percentage sign is a wild-card, in my example of countries it works like this...
            // $queryString = 'Uni';
            // Returned data = 'United States, United Kindom';
            
            // YOU NEED TO ALTER THE QUERY TO MATCH YOUR DATABASE.
            // eg: SELECT yourColumnName FROM yourTable WHERE yourColumnName LIKE '$queryString%' LIMIT 10
            
            $query = $db->query("SELECT PersNo,name_th FROM db_name WHERE PersNo LIKE '%$queryString%' LIMIT 10");
            if($query) {
               // While there are results loop through them - fetching an Object (i like PHP5 btw!).
               while ($result = $query ->fetch_object()) {
                  // Format the results, im using <li> for the list, you can change it.
                  // The onClick function fills the textbox with the result.
                  
                  // YOU MUST CHANGE: $result->value to $result->your_colum
                  $strUTF =$result->PersNo;
                  
                  $strUTF2 = $result->name_th;
                     echo '<li onClick="fill(\''.$strUTF.'\');">'.$strUTF.'</li><li onClick="fill(\''.$strUTF2.'\');">'.$strUTF2.'</li>';
                  
                  //echo "$strUTF.
";
                  }
            } else {
               echo 'ERROR: There was a problem with the query.';
            }
         } else {
            // Dont do anything.
         } // There is a queryString.
      } else {
         echo 'There should be no direct access to this script!';
      }
   }
?>


ผมใช้โค้ดจากที่นี่อ่ะครับ http://nodstrum.com/2007/09/19/autocompleter/
ยาวนิดนึงน่ะครับ




ร้านค้าออนไลน์ ร้านค้าออนไลน์
Opencart Opencart
Women's Health Online Women's Health
ข่าวมือถือ มือถือมาใหม่
aei_ou
ตุลาคม 06, 2009, 11:09:19 AM
ผลงาน: 0
aei_ou
บุคคลไม่รู้ว่าใคร
« ตอบ #1 เมื่อ: ตุลาคม 06, 2009, 11:09:19 AM »
ปกติ AJAX ก็จะต้องใช้ UTF-8 อยู่แล้ว

แต่ในกรณ๊นี้ลองใช้ TIS620 ดูครับ

แล้วใน index.html ให้ใช้ Code นี้ครับ เปลี่ยนเป็น windows-874

<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
ขั้น 3 : ซุปเปอร์สตาร์ *** ออฟไลน์ ออฟไลน์ พลังสะสม: 557
ตุลาคม 06, 2009, 11:22:03 AM
ผลงาน: 57
amdev
แฟนคลับ
ขั้น 3 : ซุปเปอร์สตาร์
***

ผลงาน: 57
ออฟไลน์ ออฟไลน์

พลังสะสม: 557

เว็บไซต์
« ตอบ #2 เมื่อ: ตุลาคม 06, 2009, 11:22:03 AM »
ปกติ AJAX ก็จะต้องใช้ UTF-8 อยู่แล้ว

แต่ในกรณ๊นี้ลองใช้ TIS620 ดูครับ

แล้วใน index.html ให้ใช้ Code นี้ครับ เปลี่ยนเป็น windows-874

<meta http-equiv="Content-Type" content="text/html; charset=windows-874">

ลองแล้วคับ ไม่ได้คับ
ขั้น 3 : ซุปเปอร์สตาร์ *** ออฟไลน์ ออฟไลน์ พลังสะสม: 557
ตุลาคม 07, 2009, 08:38:40 AM
ผลงาน: 57
amdev
แฟนคลับ
ขั้น 3 : ซุปเปอร์สตาร์
***

ผลงาน: 57
ออฟไลน์ ออฟไลน์

พลังสะสม: 557

เว็บไซต์
« ตอบ #3 เมื่อ: ตุลาคม 07, 2009, 08:38:40 AM »
ได้แระครับ แต่ต้องเปลี่ยนโค้ดไหม่เลย อิอิ  กิกิ กิกิ กิกิ
ใครอยากรู้ก็เข้าไปตามนี้ครับ
หน้า: [1]   ขึ้นบน
  พิมพ์  
 
กระโดดไป:  

Powered by MySQL Powered by PHP Valid XHTML 1.0! Valid CSS!