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

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

สอบถามการใช้งาน Typeahead ร่วมกับการทำ Add/Remove Input Fileds Dynamic หน่อยครับ
อยากให้ทุก 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>


$(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
						})
					});


$(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 ตัวสุดท้ายอีกที หลังจากเพิ่มาายการใหม่

                        //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






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ