Question

允许我动态创建具有不同ID的输入文本的脚本。它已经过测试，并创建了nameS1和ProfessorS1字段，nameS2和ProfessorS2等字段……

$(document).ready(function(){
var ids =1;
var count = 1;

dynamic_field(count);

function dynamic_field(number)
{
 html = '<tr>';
 html += '<td style="border: none;"><input type="text" style="border-bottom: 1px solid white; color: white;" name="nameS'+ids+'" id="nameS'+ids+'" class="ui-autocomplete-input" placeholder="Subject name" /></td>';
    html += '<td style="border: none;"><input type="text" style="border-bottom: 1px solid white; color: white;" name="professorS'+ids+'" id="professorS'+ids+'" class="" placeholder="Professor name" /></td>';


    if(number > 1)
    {
        html += '<td style="border: none;"><button type="button" name="remove" id=""  class="btn btn-danger remove">Remove</button></td></tr>';
        $('tbody').append(html);
    }
    else
    {   
        html += '<td style="border: none;"><button type="button" name="add" id="add" class="btn btn-success">Add</button></td></tr>';
        $('tbody').html(html);
    }
}

$(document).on('click', '#add', function(){
count++;
ids++;
dynamic_field(count);
});

$(document).on('click', '.remove', function(){
count--;
 $(this).closest("tr").remove();
 });

});

我将自动完成功能应用于ID为“ nameS1”和“ nameS2”的元素，但仅应用于“ nameS1”。如果我删除“ nameS1”并保留“ nameS2”，则自动完成功能不起作用

$(document).ready(function($){
$('#nameS1').autocomplete({
source:'filter/search-professor.php', 
minLength:1
});
});


$(document).ready(function($){
$('#nameS2').autocomplete({
source:'filter/search-professor.php', 
minLength:1
});
});

Answer 1

看看是否有帮助。

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
    
    var x = 1; //initlal text box count
    var availableAttributes = [
	  "account_address",
	  "account_address_city",
	  "account_address_country",
	  "account_address_state",
	  "account_address_street1",
	  "account_address_street2",
	  "account_address_zip",
	  "account_email",
	  "account_login",
	  "account_name",
	  "account_number",
	  "account_telephone"
    ];
    
    
    
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); 
            
            $(wrapper).find('input[type=text]:last').autocomplete({
                source: availableAttributes
            });	
            //add input box
        }
    });
    
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
    
    $("input[name^='mytext']").autocomplete({
		source: availableAttributes
	});	
    
});

<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>
<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div><input type="text" name="mytext[]"></div>
</div>

自动完成功能在动态输入字段中不起作用

1 个答案: