สอบถามการใช้งาน Typeahead ร่วมกับการทำ Add/Remove Input Fileds Dynamic หน่อยครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามการใช้งาน Typeahead ร่วมกับการทำ Add/Remove Input Fileds Dynamic หน่อยครับ

สอบถามการใช้งาน Typeahead ร่วมกับการทำ Add/Remove Input Fileds Dynamic หน่อยครับ
1
2
3
4
5
6
7
8
9
10
11
12
13
อยากให้ทุก input สามารถใช้งาน autocomplete ได้เหมือนกันทุก input อ่ะครับ ตอนนี้มันทำงานแค่อันแรกอันเดียวครับ
 
 
<form name="FormData" method="post" action="" >
<div class="wrapper">
<div class="row">
<div class="col-md-10">
<input type="text" name="input_array_name[]" class="form-control text-uppercase typeahead" autocomplete="off" placeholder="ค้นหาชื่อบริษัท...."/>
</div>
</div>   
</div>
<p><button class="add_fields">Add More Fields</button></p>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(document).ready(function() {
                        var max_fields = 10; //Maximum allowed input fields
                        var wrapper    = $(".wrapper"); //Input fields wrapper
                        var add_button = $(".add_fields"); //Add button class or ID
                        var x = 1; //Initial input field is set to 1
                         
                        //When user click on add input button
                        $(add_button).click(function(e){
                            e.preventDefault();
                            //Check maximum allowed input fields
                            if(x < max_fields){
                                x++; //input field increment
                                //add input field
                                $(wrapper).append('<div class="row"><div class="col-md-10"><input type="text" name="input_array_name[]" class="form-control text-uppercase typeahead" autocomplete="off" placeholder="ค้นหาชื่อบริษัท...." /> <a href="javascript:void(0);" class="remove_field">Remove</a></div></div>');
                            }
                        });
                         
                        //when user click on remove button
                        $(wrapper).on("click",".remove_field", function(e){
                            e.preventDefault();
                            $(this).parent('div').remove(); //remove inout field
                            x--; //inout field decrement
                        })
                    });


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
$(document).ready(function(){
            $('.typeahead').typeahead({
                autoSelect: true,
                minLength: 2,
                //delay: 200,
                hint: true,
                highlight:true,
                source: function(query, result)
                {
                    $.ajax({
                        url:"fetch.php",
                        method:"POST",
                        data:{query:query},
                         
                        dataType:"json",
                        success:function(data)
                        {
                            result($.map(data, function(item){
                                return item;
                            }));
                        }
                    })
                }
            });
             
        });


Pramuan.pao 18-09-2018 11:42:35

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

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


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


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

 ความคิดเห็นที่ 1
เรียกใช้ typehead ให้กับ input class typehead ตัวสุดท้ายอีกที หลังจากเพิ่มาายการใหม่

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
//When user click on add input button
$(add_button).click(function(e){
    e.preventDefault();
    //Check maximum allowed input fields
    if(x < max_fields){
        x++; //input field increment
        //add input field
        $(wrapper).append('<div class="row"><div class="col-md-10"><input type="text" name="input_array_name[]" class="form-control text-uppercase typeahead" autocomplete="off" placeholder="ค้นหาชื่อบริษัท...." /> <a href="javascript:void(0);" class="remove_field">Remove</a></div></div>');
         
        //////////////
            $('.typeahead:last').typeahead({
                autoSelect: true,
                minLength: 2,
                //delay: 200,
                hint: true,
                highlight:true,
                source: function(query, result)
                {
                    $.ajax({
                        url:"fetch.php",
                        method:"POST",
                        data:{query:query},
                          
                        dataType:"json",
                        success:function(data)
                        {
                            result($.map(data, function(item){
                                return item;
                            }));
                        }
                    })
                }
            });                               
        ///////////////
         
    }
});


ninenik 18-09-2018
 ความคิดเห็นที่ 2
ขอบคุณมากครับ


pramuan.pao 20-09-2018 07:57







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