รบกวนเรื่อง ajax autocomplete อีกทีครับ
ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา รบกวนเรื่อง ajax autocomplete อีกทีครับ
คือต้องอภัยหากตั้งกระทู้เรื่องเดียวกันติดกันแต่เพราะว่ามันคนละปัญหากันจริงๆ ปัญหาของกระผมคือ มันไม่สามารถเรียกข้อมูลออกมาจากฐานข้อมูลได้เลยครับ อีกทั้งยังไม่มีไอคอนภาพ autocomplete.gif ออกมาอีกเลยอยากให้ผูู้รู้รบกวนบอกทีครับกระผมทำผิดตรงไหน ทั้งๆที่ก็ทำตามเว็บทุกอย่างแล้ว
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <link rel= "stylesheet" type= "text/css" href= "stlye/autocomplete.css" /> <script type= "text/javascript" src= "js/autocomplete.js" ></script> <!--<script type= "text/javascript" src= "js/jsfunction.js" ></script>--> <script type= "text/javascript" src= "Scripts/AC_RunActiveContent.js" ></script> <!--<script type= "text/javascript" src= "js/jautocompleteset.js" ></script>--> <script type= "text/javascript" > function make_autocom(autoObj,showObj){ var mkAutoObj=autoObj; var mkSerValObj=showObj; new Autocomplete(mkAutoObj, function () { this.setValue = function (id) { document.getElementById(mkSerValObj).value = id; } if ( this.isModified ) this.setValue( "" ); if ( this.value.length < 1 && this.isNotClick ) return ; return "obtannnouncedata.php?q=" + this.value; }); } make_autocom( "find" , "finddata" ); </script> </head> <body> <!--main dispaly--> <div style= "height:400px;" ><!--fix size--> <span class = "headsmallban" >ระบบสืบค้นรายชื่อผู้มีสิทธิ์เข้าศึกษาโครงการความร่วมมือทางวิชาการฯ รุ่นที่ 6/1</span> <div class = "findfrom" > <p class = "strongs" >พิมพิ์<span style= "color:#669933;" >[ชื่อ - นามสุกล]</span>,<span style= "color:#6699CC;" >[ชื่อศูนย์พัฒนาเด็กเล็ก]</span>หรือ<span style= "color:#FF9933;" >[จังหวัด]</span>ของท่านเพื่อค้นหาและตรวจสอบรายชื่อที่นี่</p> <p> <form id= "form1" name= "form1" method= "post" > <input type= "text" name= "find" id= "find" /> <input type= "hidden" name= "finddata" id= "finddata" /> </form> </p> </div> </div><!--fix size--> <!--main dispaly--> </div> |
อันนี้ส่วนที่เรียกข้อมูลมาครับ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <? include "common.php" ; connectdb(); $q = $_GET [ "q" ]; $pagesize = 50; $strSQL = "SELECT * FROM std_special_student " ; $strSQL = $strSQL . "WHERE pclass='61' AND mobile LIKE '%" . $q . "%' " ; /*$strSQL = "SELECT * FROM std_special_student "; $strSQL = $strSQL."WHERE pclass='61' ";*/ $objQuery = mysql_query( $strSQL ) or die ( "Error Query [" . $strSQL . "]" ); while ( $objResult = mysql_fetch_array( $objQuery )) { $id = $objResult [ "mobile" ]; // id input hidden $name = $objResult [ "mobile" ]; // textbox input // protect ' $name = str_replace ( "'" , "'" , $name ); // กำหนดตัวหนาให้กับคำที่มีการพิมพ์ $display_name = preg_replace( "/(" . $q . ")/i" , "<b>$1</b>" , $name ); echo "<li onselect=" this.setText( '$name' ).setValue( '$id' ); ">$display_name</li>" ; } ?> |

คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
ลองตรวจสอบไฟล์ทั้ง javascript และ css ไฟล์ ว่าได้ดึงมาใช้ หรือเรียกใช้ถูกต้องไหม

ผมก็มีปัญหาเช่นเดียวกันเลยครับ แต่ของผมมันฟ้องว่า javascript error มีข้อความ error ว่า this.e is null or not object ผมเข้าใจว่ามันเออเรอในไฟล์ autocomplete.js ครับ และผมสงสัยตรงจุดที่เรียกใช้ function make_autocom("find","finddata") ครับ ว่าควรเรียกใช้ที่ไหน (จากด้านบน เรียกใช้ในแท๊กจาวาสคริปแบบนั้นจะได้ไหม) หรือว่าต้องเรียกใช้ใน action onKeyUp() ของ text box กันแน่ แต่ผมลองทั้งสองจุดแล้ว หากเรียกตรงแท๊กจาวาสคริปแบบด้านบน ระบบจะไม่ทำงาน ไม่มีแสดงอาการอะไรออกมาเลย แต่หากเรียกที่ onkeyup() จะทำงานแล้วแจ้งว่า javascript error this.e is nul or not object ทั้งที่ผมก็ copy ทั้ง html และ ตั้งชื่อ form หรือ text box ตามตัวอย่างทั้งหมด ส่วนไฟล์ที่ดึงดาตาเบสนั้นผมคาดว่าน่าจะยังไม่เกี่ยว เนื่องจากดูเหมือนมันยังทำงานไม่ถึงจุดนั้น เพราะผมลอง print out ถ้อยคำออกมาดูใน log มันยังไม่ print ออกมา แสดงว่าคงทำงานยังไม่ถึงส่วนที่ดึงข้อมูลแล้ว javascript error เสียก่อน รบกวนคุณ ninekik ช่วยวิเคราะห์ปัญหาให้ผมหน่อยนะครับ เพราะผมชอบตัวอย่างนี้มากอยากได้ auto complete ในลักษณะนี้ไปงานในระบบครับ ขอบคุณล่วงหน้านะครับ

เข้าไปดูในตัวอย่าง
https://www.ninenik.com/demo/simple_autocomplete.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title>simple autocomplete</title> </head> <body> <link rel= "stylesheet" type= "text/css" href= "autocomplete.css" /> <form id= "form1" name= "form1" method= "post" action= "" > <input name= "article_topic_show" type= "text" id= "article_topic_show" size= "60" /> <input name= "h_article_topic_show" type= "hidden" id= "h_article_topic_show" value= "" /> </form> <script type= "text/javascript" src= "autocomplete.js" ></script> <script type= "text/javascript" > function make_autocom(autoObj,showObj){ var mkAutoObj=autoObj; var mkSerValObj=showObj; new Autocomplete(mkAutoObj, function () { this.setValue = function (id) { document.getElementById(mkSerValObj).value = id; } if (this.isModified ) this.setValue( "" ); if ( this.value.length < 1 && this.isNotClick ) return ; return "gdata.php?q=" + encodeURIComponent(this.value); }); } // การใช้งาน // make_autocom(" id ของ input ตัวที่ต้องการกำหนด "," id ของ input ตัวที่ต้องการรับค่า"); make_autocom( "article_topic_show" , "h_article_topic_show" ); </script> </body> </html> |
