ต้องการทำ Autocomplete Ajax แบบหลายๆ Input Tag ทำอย่างไรหรอครับ ??

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ต้องการทำ Autocomplete Ajax แบบหลายๆ Input Tag ทำอย่างไรหรอครับ ??

ต้องการทำ Autocomplete Ajax แบบหลายๆ Input Tag ทำอย่างไรหรอครับ ??
จากตอนแรกผมต้องการทำ Autocomplete ในการค้นหาชื่อแล้วดึงprimary Key มาเก็บครับ ซึ่ง ก็ทำได้แล้วครับ
ตามลิงค์นี่ครับ https://www.ninenik.com/สร้างฟังก์ชัน_autocomplete_ให้ใช้งานแบบง่าย_ด้วย_ajax-209.html

แต่ผมต้องการจะทำให้มีหลายๆ input tag ครับ แล้วก็สามารถAutocomplete ได้ทีละ tag อะครับ ไม่ทราบว่าผมต้องทำอย่างไรหรอครับ 
นี่คือโค้ด PHP ครับ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form id="form1" name="form1" method="post" action="">
   <?php
    for ($i = 1; $i <= 10 ; $i++) {
        ?>
        <p>
          <label for=""><?php echo $i."."; ?></label>
          <input name="show_province" type="text" id="show_province<?php echo $i; ?>" size="50" />
          <input name="h_province_id" type="hidden" id="h_province_id<?php echo $i; ?>" value="" />
          <br>
          <hr>
          ID:
          <input type="text" name="province_id" id="province_id<?php echo $i; ?>">
          <br>
          Name:
          <input type="text" name="province_name_th" id="province_name_th<?php echo $i; ?>">
          <br><br><hr />
        </p>
        <?php
    }
   ?>
 </form>
นี่คือ โค้ด Javascript ครับ
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
<script type="text/javascript">
 var c = 1;
 for (var i = 1; i <= 10; i++) {
   function make_autocom(autoObj,showObj){
       var mkAutoObj = autoObj;
       var mkSerValObj = showObj;
       new Autocomplete(mkAutoObj, function() {
           this.setValue = function(id) {
               document.getElementById(mkSerValObj).value = id;
               // ถ้ามี id ที่ได้จากการเลือกใน autocomplete
               if(id != ""){
                   // ส่งค่าไปคิวรี่เพื่อเรียกข้อมูลเพิ่มเติมที่ต้องการ โดยใช้ ajax
                   $.post("g_fulldata.php",{id:id},function(data){
                       if(data != null && data.length>0){ // ถ้ามีข้อมูล
                           // นำข้อมูลไปแสดงใน textbox ที่่เตรียมไว้
                           $("#province_id"+c).val(data[0].id);
                           $("#province_name_th"+c).val(data[0].name_th);
                          // $("#province_name_en").val(data[0].name_en);
                       }
                   });
               }else{
                   // ล้างค่ากรณีไม่มีการส่งค่า id ไปหรือไม่มีการเลือกจาก autocomplete
                   $("#province_id"+c).val("");
                   $("#province_name_th"+c).val("");
                   //$("#province_name_en").val("");
               }
           }
           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("show_province"+c,"h_province_id"+c);
   c = c + 1;
 }
 </script>
นี่คือ ภาพผลลัพธ์แรกครับ


นี่คือผลลัพธ์ที่ผมอย่างจะสอบถามครับ


จะทำอย่างไรให้ใช้ได้ หลายๆ input tag ครับผมครับ ผมใส่วนลูปในโค้ด Javascript แล้วแต่ไม่ทำงานครับ ผมต้องทำอย่างไรครับผม


Piratchai Pong PC 01-05-2018 11:18:59

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
ลองเปลี่ยนมาใช้ jqueryui autocomplete น่าจะประยุกต์เพิ่มเติมได้ง่ายกว่า ดูตัวอย่างโค้ดด้านล่างเป็นแนวทาง

ไฟล์ dbconnect.php

 
1
2
3
4
5
6
7
8
9
10
11
<?php 
$mysqli = new mysqli("localhost", "root","","test"); 
/* check connection */
if ($mysqli->connect_errno) { 
    printf("Connect failed: %s\n", $mysqli->connect_error); 
    exit(); 
} 
if(!$mysqli->set_charset("utf8")) { 
    printf("Error loading character set utf8: %s\n", $mysqli->error); 
    exit(); 
}
 

ไฟล์ get_province_json.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
39
40
41
42
43
<?php
header("Content-type:application/json; charset=UTF-8");   
header("Cache-Control: no-store, no-cache, must-revalidate");        
header("Cache-Control: post-check=0, pre-check=0", false);
require_once("inc/dbconnect.php");
 
$json_data = array();
 
$pagesize = 50; // จำนวนรายการที่ต้องการแสดง
$table_db="tbl_provinces"; // ตารางที่ต้องการค้นหา
$find_field="province_name"; // ฟิลที่ต้องการค้นหา
if(isset($_GET['term']) && $_GET['term']!=""){ 
    $keyword = trim($_GET["term"]);
    $sql = "SELECT * FROM $table_db
    WHERE  LOCATE('$keyword', $find_field) > 0
    ORDER BY LOCATE('$keyword', $find_field), $find_field LIMIT $pagesize";
}else{
    $sql = "SELECT * FROM $table_db  WHERE 1 LIMIT $pagesize";     
}
// หากข้อมูลมีจำนวนมาก ให้เปลี่ยนตรง * ให้เป็นเฉพาะฟิลด์ที่จะใช้งานเช่น
// SELECT province_name,province_id FROM $table_db   เป็นต้น เพื่อให้การทำงานเร็วขึ้น
 
$result = $mysqli->query($sql);
if($result && $result->num_rows > 0){
    while($row = $result->fetch_assoc()){
        $json_data[] = array(
            "value" => $row['province_name'],
            "label" => $row['province_name'],
            "id" => $row['province_id']  
            // เพิ่ม key ของ array ได้ตามต้องการ แต่ต้องมี value กับ label ในที่นี้เพิ่ม id เข้ามา
        );
    }
}
// แปลง array เป็นรูปแบบ json string 
if(isset($json_data)){ 
    $json= json_encode($json_data);   
    if(isset($_GET['callback']) && $_GET['callback']!=""){   
    echo $_GET['callback']."(".$json.");";       
    }else{   
    echo $json;   
    }   
}
?>
 

ไฟล์โค้ดตัวอย่าง

 
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" />    
    <style type="text/css">
        /*   css ส่วนของรายการที่แสดง  */
        .ui-autocomplete { 
            padding-right: 5px;
            max-height:200px !important;
            overflow: auto !important;
        } 
    </style>
</head>
<body>
 
<br>
<br>
<div class="container">
    <div class="form-group row">
        <div class="col-xs-6">
        <input type="text" class="form-control typeahead" name="myprovince1" id="myprovince1" value="" />       
        </div>
    </div>
    <div class="form-group row">
        <div class="col-xs-6">
        <input type="text" class="form-control typeahead" name="myprovince2" id="myprovince2" value="" />       
        </div>
    </div>
    <div class="form-group row">
        <div class="col-xs-6">
        <input type="text" class="form-control typeahead" name="myprovince3" id="myprovince3" value="" />       
        </div>
    </div>
    <div class="form-group row">
        <div class="col-xs-6">
        <input type="text" class="form-control typeahead" name="myprovince4" id="myprovince4" value="" />       
        </div>
    </div>           
</div>
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
     
    $( ".typeahead" ).autocomplete({ // ใช้งาน autocomplete กับ input text id=tags
        minLength: 0, // กำหนดค่าสำหรับค้นหาอย่างน้อยเป็น 0 สำหรับใช้กับปุ่ใแสดงทั้งหมด
        source: "get_province_json.php", // กำหนดให้ใช้ค่าจากการค้นหาในฐานข้อมูล
        open:function(){ // เมื่อมีการแสดงรายการ autocomplete
 
        },
        select: function( event, ui ) {
            // สามารถนำค่า ที่เลือก ไปใช้งานผ่านการอ้างอิ ui.item.xxxx โดย xxx คือ key ที่เราสร้างในไฟล์ json
            console.log(ui.item.id);
            console.log(ui.item.label);
            console.log(ui.item.value);
        }
    });    
     
});
</script>
</body>
</html>
 

ตัวอย่างรูปผลลัพธ์

 


 


>>>  อัพเดท >>> 01-05-2018
------------------------------------------
กรณีประยุกต์นำค่าไปใช้เพิ่มเติม ให้ทำการเพิ่ม custom data attributes ในรูปแบบ data- เข้าไป
สมมติเราจะนำค่าสองค่าได้ที่จากการเลือก autocomplete ไปใช้งาน เราจะเพิ่ม data attribute เข้าไป 2 ค่าคือ
data-obj1="" และ data-obj2="" โดยจะให้ค่า id ของ object เป้าหมายที่เราต้องการใช้ค่านั้น

ตัวอย่าง


1
2
3
4
5
6
7
8
9
10
11
12
<div class="form-group row">
    <div class="col-xs-3">
    <input type="text" class="form-control typeahead" data-obj1="myprovince2_id" data-obj2="myprovince2_name"
    name="myprovince2" id="myprovince2" value="" />       
    </div>
    <div class="col-xs-1">
    <input type="text" class="form-control" name="myprovince2_id" id="myprovince2_id" value="" />       
    </div>    
    <div class="col-xs-2">
    <input type="text" class="form-control" name="myprovince2_name" id="myprovince2_name" value="" />       
    </div>                
</div>



obj1 เรากำหนดเป็น myprocince2_id และ obj2 เรากำหนดเป็น province2_name ซึ่งทั้งสองค่า
เป็น id ของ input element ที่เราจะเอาไว้อ้างนำค่าที่ได้จาก autocomplete ไปแสดง

โค้ดตัวอย่างแบบเต็ม

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" />    
    <style type="text/css">
        /*   css ส่วนของรายการที่แสดง  */
        .ui-autocomplete { 
            padding-right: 5px;
            max-height:200px !important;
            overflow: auto !important;
        } 
    </style>
</head>
<body>
 
<br>
<br>
<div class="container">
    <div class="form-group row">
        <div class="col-xs-3">
        <input type="text" class="form-control typeahead" data-obj1="myprovince1_id" data-obj1="myprovince1_name"  
        name="myprovince1" id="myprovince1" value="" />       
        </div>
        <div class="col-xs-1">
        <input type="text" class="form-control" name="myprovince1_id" id="myprovince1_id" value="" />       
        </div>          
    </div>
    <div class="form-group row">
        <div class="col-xs-3">
        <input type="text" class="form-control typeahead" data-obj1="myprovince2_id" data-obj2="myprovince2_name"
        name="myprovince2" id="myprovince2" value="" />       
        </div>
        <div class="col-xs-1">
        <input type="text" class="form-control" name="myprovince2_id" id="myprovince2_id" value="" />       
        </div>    
        <div class="col-xs-2">
        <input type="text" class="form-control" name="myprovince2_name" id="myprovince2_name" value="" />       
        </div>                
    </div>
    <div class="form-group row">
        <div class="col-xs-3">
        <input type="text" class="form-control typeahead" data-obj1="myprovince3_id" data-obj2="myprovince3_name"
        name="myprovince3" id="myprovince3" value="" />       
        </div>
        <div class="col-xs-1">
        <input type="text" class="form-control" name="myprovince3_id" id="myprovince3_id" value="" />       
        </div>    
        <div class="col-xs-2">
        <input type="text" class="form-control" name="myprovince3_name" id="myprovince3_name" value="" />       
        </div>                
    </div>    
</div>
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
     
    $( ".typeahead" ).autocomplete({ // ใช้งาน autocomplete กับ input text id=tags
        minLength: 0, // กำหนดค่าสำหรับค้นหาอย่างน้อยเป็น 0 สำหรับใช้กับปุ่ใแสดงทั้งหมด
        source: "get_province_json.php", // กำหนดให้ใช้ค่าจากการค้นหาในฐานข้อมูล
        open:function(){ // เมื่อมีการแสดงรายการ autocomplete
            obj1 = $(this).data("obj1"); // เก็บค่า id ของ object เป้าหมายแรก
            obj2 = $(this).data("obj2"); // เก็บค่า id ของ object เป้าหมายที่สอง
        },
        select: function( event, ui ) {
            // สามารถนำค่า ที่เลือก ไปใช้งานผ่านการอ้างอิ ui.item.xxxx โดย xxx คือ key ที่เราสร้างในไฟล์ json
            console.log(ui.item.id);
            console.log(ui.item.label);
            console.log(ui.item.value);
            $("#"+obj1).val(ui.item.id); //นำค่ามาแสดง
            $("#"+obj2).val(ui.item.value); //นำค่ามาแสดง
        }
    });    
     
});
</script>
</body>
</html>


ตัวอย่างผลลัพธ์







ninenik 01-05-2018
 ความคิดเห็นที่ 2
ลองทำตามเเล้วอะค่ะ เเต่มันไม่ค้นหาเหมือนตัวอย่าง ต้องทำอย่างไรค่ะ 


ploypailin 08-05-2018 19:54
 ความคิดเห็นที่ 3


topbiggun 19-06-2018 21:48
1







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ