Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > PHP > PHP Forum > ผมมีโค้ดAutocomplete ผมจะดึงข้อมูลจากฐานข้อมูลมาค้นหาใน Autocomplete ได้ยังไงครับ



 

ผมมีโค้ดAutocomplete ผมจะดึงข้อมูลจากฐานข้อมูลมาค้นหาใน Autocomplete ได้ยังไงครับ

 



Topic : 135490



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook



<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>



Tag : PHP







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2020-08-26 11:00:53 By : ipiammax View : 1060 Reply : 13
 

 

No. 1



โพสกระทู้ ( 1,458 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

โค้ดตัวอย่าง จขกท. นำมาจาก
https://jqueryui.com/autocomplete/

วิธีใช้ PHP array ใน JS พึ่ง JSON

Code (PHP)
<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>jQuery UI Autocomplete - Default functionality</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      </head>
   <body>
   <?php
      // mysqli connection

      // query ข้อมูลมาเก็บไว้ใน Array
      $phpArray = ...;
   ?>
      <div class="ui-widget">
         <label for="tags">Tags: </label>
         <input id="tags">
      </div>
      <script>
      $( function() {
         var availableTags = <?php echo json_encode($phpArray); ?>;  // วางแทนของเดิม

         $( "#tags" ).autocomplete({
            source: availableTags
         });
      } );
      </script>
   
   </body>
</html>






มาตามคำขอจาก pm






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-08-26 13:56:17 By : PhrayaDev
 


 

No. 2



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ตอบความคิดเห็นที่ : 1 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-08-26 13:56:17
รายละเอียดของการตอบ ::
ผมใส่ถูกไหมครับ เพราะทำแล้วยังไม่ได้ครับ


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<?php
// mysqli connection
include('condb.php');

// query ข้อมูลมาเก็บไว้ใน Array
$sql = "select * from opduser";
$query = mysqli_query($condb,$sql);
$phpArray=mysqli_fetch_array($query,MYSQLI_ASSOC);
?>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
<script>
$( function() {
var availableTags = <?php echo json_encode($phpArray); ?>; // วางแทนของเดิม

$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>

</body>
</html>



ประวัติการแก้ไข
2020-08-27 12:59:05
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-08-27 12:58:38 By : ipiammax
 

 

No. 3



โพสกระทู้ ( 1,458 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

Code (PHP)
$sql = "select * from opduser";
$query = mysqli_query($condb,$sql);

$phpArray = [];
while($row = mysqli_fetch_array($query))
{
   $phpArray[] = $row['autocomplete']; // ใส่คอลัมน์ที่เก็บ autocomplete
}

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-08-27 13:23:00 By : PhrayaDev
 


 

No. 4



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ตอบความคิดเห็นที่ : 3 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-08-27 13:23:00
รายละเอียดของการตอบ ::
ตรงนี้คืออะรไครับ หรือใส่อะไร $phpArray = [];


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<?php
// mysqli connection
include('condb.php');

// query ข้อมูลมาเก็บไว้ใน Array
$sql = "select * from opduser";
$query = mysqli_query($condb,$sql);

$phpArray = ['$query'];
while($row = mysqli_fetch_array($query))
{
$phpArray[] = $row['name']; // ใส่คอลัมน์ที่เก็บ autocomplete
}
?>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
<script>
$( function() {
var availableTags = <?php echo json_encode($phpArray); ?>; // วางแทนของเดิม

$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>

</body>
</html>




ประวัติการแก้ไข
2020-08-27 13:35:38
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-08-27 13:33:27 By : ipiammax
 


 

No. 5



โพสกระทู้ ( 1,458 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

$phpArray = []; คือการกำหนดตัวแปรนั้นให้เป็น array (เป็นวิธีใหม่ที่เพิ่งมีขึ้นใน PHP 5.4 มั้งถ้าจำไม่ผิด)
ซึ่งมีความหมายเหมือนกันกับ $phpArray = array(); ใน PHP 5.3 หรือต่ำกว่า
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-08-27 13:38:26 By : PhrayaDev
 


 

No. 6



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ตอบความคิดเห็นที่ : 5 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-08-27 13:38:26
รายละเอียดของการตอบ ::
ผมมีโค้ดตัวนี้ แต่มันใช้เฉพาะ text ไม่ได้ครับ ถ้ามี text 5 อัน มันจะเป็น autocomplete ทั้งหมด 5 อันเลยครัล อยากทราบว่าจะกำหนดให้ใช้ได้เฉพาะ texะ ที่ต้องการทำยังไงครับ

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script type="text/javascript">
var states = [
<?php
$opduser = "";
while ($result = mysqli_fetch_array($query)) {
$opduser .= "'" . $result['opduser_name'] . "',";
}
echo rtrim($opduser, ",");
?>
];
$(function () {
$("input").autocomplete({
source: [states]
});
});
</script>
<style>
.xdsoft_autocomplete_dropdown{
padding: 8px;
}
</style>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-08-27 13:46:27 By : ipiammax
 


 

No. 7



โพสกระทู้ ( 1,458 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

ใส่ LIMIT ใน query + where clause ครับ

หรือทดสอบแบบรวดเร็ว สมมติต้องการอันเดียว
ใน js ก็ไม่ต้องครอบ JSON
Code (PHP)
var states = <?php echo $phpAC1; ?>;  // autocomplete รายการเดียว

// หรือใช้แบบนี้
source: [<?php echo $phpArray[0] . ", " . $phpArray[2]; ?>;] // ดึงจาก element ที่ 1, 3 จาก $phpArray




ต่อไปครอบโค้ดด้วยครับ จะได้อ่านง่ายๆ หน่อย
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-08-27 14:00:09 By : PhrayaDev
 


 

No. 8



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ตอบความคิดเห็นที่ : 7 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-08-27 14:00:09
รายละเอียดของการตอบ ::
ขอติดต่อเป็นการส่วนตัวได้ไหมครับ ไลน์ ก็ได้ครับ
[/quote -no]
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-08-27 14:06:14 By : ipiammax
 


 

No. 9



โพสกระทู้ ( 1,458 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

ถ้าไม่มีข้อมูลที่เป็นความลับทางราชการ
อยากให้ถามในกระทู้...เพื่อเป็นประโยชน์ต่อเพื่อนมนุษย์
แต่เหนือสิ่งอื่นใด...มี สุภาษิตไทยที่ว่า

Quote:
คนเดียวหัวหาย สองคนเพื่อนตาย สามคนกลับมาได้


Quote:
อย่าเชื่ออะไร จนกว่าจะได้พิสูจน์ด้วยตนเอง





ไลน์แต่ก่อนเคยติด แต่ไม่ได้ใช้นาน มีแต่โฆษณาขายของ
กับพวกคำเชิญจากบริษัท IT ต่างๆ เช่น นุ่มเล็ก กูเข่อ ไปดู ...ฯลฯ
ล่าสุด บริษัทหัวโว้ย...ผมรำคาญจึงเลิกใช้ไลน์แบบสาธารณะอีกเลย
ปัจจุบัน จึงใช้เฉพาะเรื่องขาร้อนก่อนตาย

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-08-27 14:39:50 By : PhrayaDev
 


 

No. 10



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ตอบความคิดเห็นที่ : 9 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-08-27 14:39:50
รายละเอียดของการตอบ ::
ไม่มีความลับทางราชการครับ แต่บางโค้ดผมไม่รู้รื่องจริงๆครับ เลยอยากให้พี่ช่วยดูให้หน่อยหรือไม่ถ้ารีโฒทมาช่วยยิ่งดีมากเลยครับ แต่พี่ดูแค่โค้ดนิดเดียวครับเพราะผมเขียนไว้บ้างแล้ว ผมไม่มีความรู้ทางนี้เท่าไหร่ครับ โค้ดบางอันยังไม่รุ้เลยครับ ผมต้องทำเพราะโดนสั่งมาครับ ยังไงช่วยผมหน่อยนะครับ



ประวัติการแก้ไข
2020-08-27 14:55:57
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-08-27 14:54:22 By : ipiammax
 


 

No. 11



โพสกระทู้ ( 1,458 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

งั้นวางตรงนี้เลยครับ ...ครอบ PHP Code ด้วย
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-08-27 15:50:20 By : PhrayaDev
 


 

No. 12



โพสกระทู้ ( 1,994 )
บทความ ( 10 )



สถานะออฟไลน์
Facebook Blogger

มีตัวอย่างมาให้ลองดูครับ เผื่อช่วยได้

Code
<table cellpadding="10">
<thead>
<tr>
<th><h3 style="color:blue">Autocomplete แบบคิวรี่ทุกครั้ง</h3></th>
<th><h3 style="color:green">Autocomplete แบบคิวรี่เก็บไว้ใน Array</h3></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="ui-widget">
<label for="birds">ค้นหาสมาชิก : </label>
<input id="birds">
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
ผลลัพธ์ที่เลือก :
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</td>
<td>
<div class="ui-widget">
<label for="birds">ค้นหาสมาชิก : </label>
<input id="user_fullname">
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
ผลลัพธ์ที่เลือก :
<div id="log2" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

</td>
</tr>
</tbody>
</table>




Code (JavaScript)
<script type="text/javascript">
var autoCompleteData = new Array();

function setAutoComplete(){
    $( "#user_fullname" ).autocomplete({
      minLength: 0,
      source: autoCompleteData,
      select: function( event, ui ) {
        //$( "#user_fullname" ).val( ui.item.label );
        $( "<div>" ).text( ui.item.value + ' : ' + ui.item.label ).prependTo( "#log2" );
        $( "#log2" ).scrollTop( 0 );
        return false;
      }
    })
    .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<a>" + item.label + "</a>" )
        .appendTo( ul );
    };
}
//เรียกข้อมูลสมาชิกมาเก็บไว้ในตัวแปร autoCompleteData ผ่านการรับส่งข้อมูลแบบ AJAX
$.ajax({
    dataType: "json",
    url: ajaxURL + "&action=query",
    success: function(return_data){
        autoCompleteData = return_data;
        setAutoComplete();
    }
});
</script>




Code (PHP)
<?php
include_once('classes/connection.php');

/***** FUNCTION DEFINED  *****/
function search(){
    $db = new dbConnect();
    $search_key = isset($_GET['term']) ? $_GET['term'] : '';
    $no = 0;
    $data = array();
    $sql = "SELECT mbr_code, mbr_name FROM `tb_member` WHERE mbr_name LIKE '%$search_key%' ";  //-- ข้อมูลสาขาทั้งหมด
    $qry = mysql_query($sql) or die( $db->showError('',__FILE__,__LINE__) );
    while($row = mysql_fetch_assoc($qry)){
        $data[] = array('id'=>$row['mbr_code'], 'value'=>$row['mbr_name']);
    }
    echo json_encode($data);
}

function query(){
    $db = new dbConnect();//เชื่อมต่อฐานข้อมูล
    $data = array();
    $sql = "SELECT mbr_code, mbr_name FROM `tb_member` WHERE mbr_status > 0 ";  //-- ข้อมูลสมาชิกที่ใช้งาน
    $qry = mysql_query($sql) or die( $db->showError('',__FILE__,__LINE__) );
    while($row = mysql_fetch_assoc($qry)){
        $data[] = array('value'=>$row['mbr_code'], 'label'=>$row['mbr_name']);
    }
    echo json_encode($data);
}
//-- END DEFINE FUNCTION


//***** Call Function *****//
$action = isset($_POST['action']) ? $_POST['action'] : '';
if($action == '') $action = isset($_GET['action']) ? $_GET['action'] : '';
switch( $action ){
    case 'search':
        search();
        break;
    case 'query':
        query();
        break;   
}
//-- END Call Function

?>



ปล. ส่วนของ classes/connection.php คือการเชื่อมต่อฐานข้อมูล เปลี่ยนไปใช้ของตัวเองนะครับ
ปล.2 mysql_xxxxx() เปลี่ยนเป็น mysqli_xxxxx() เพื่อให้ใช้กับเวอร์ชั่นใหม่ได้นะครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-08-27 16:27:52 By : {Cyberman}
 


 

No. 13



โพสกระทู้ ( 37 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ตอบความคิดเห็นที่ : 12 เขียนโดย : {Cyberman} เมื่อวันที่ 2020-08-27 16:27:52
รายละเอียดของการตอบ ::
ขอบคุณทุกคนครับ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-09-02 11:18:59 By : ipiammax
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : ผมมีโค้ดAutocomplete ผมจะดึงข้อมูลจากฐานข้อมูลมาค้นหาใน Autocomplete ได้ยังไงครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 05
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่