Question

如何在动态添加的文本框中添加自动完成功能？我用这种方式 $（'＃se'）。autocomplete（）; ，但没有得到它。

$(document).ready(function()
{
    var counter = 2;
    $("#addButton").click(function () 
    {
        var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'TextBoxDiv' + counter);

        newTextBoxDiv.after().html(
          '<input type="text" placeholder="Role" name="Role' + counter + 
          '" id="textbox' + counter + '" value="" > <input type="text"
          placeholder="Search" name="search' + counter + 
          '" id="se" value="" > <input type="hidden"  name="search' + counter + 
          '" id="se' + counter + '" value="" >');

        newTextBoxDiv.appendTo("#TextBoxesGroup");
        $('#se').autocomplete();
        counter++;
    });

<div id='TextBoxesGroup'>
    <div id="TextBoxDiv1" class="form-inline control-group">
        <%= text_field_tag('roles', nil,:id => 'textbox1')%>
        <%= text_field_tag('search', nil,:id => 'se')%>
        <%=hidden_field_tag(:id_search, value = "")%>
        <input type='button' value='Add' id='addButton'>
    </div>
</div>

Answer 1

您的代码中存在字符串连接和选择问题： -

主要的是$('#se' + counter).autocomplete({source: availableTags});你没有在这里附上反击。而且也没有消息来源。在我刚刚附加了hummy源代码的例子中，它可能是静态源或ajax inyour case。

有关详细信息，请参阅Doc ...

Demo

试试这个： -

$("#addButton").click(function () {
   var newTextBoxDiv = $(document.createElement('div'))
     .attr("id", 'TextBoxDiv' + counter);

   newTextBoxDiv.after().html('<input type="text" placeholder="Role" name="Role' +   counter +   '" id="textbox' + counter + '" value=""> <input type="text" placeholder="Search" name="search' + counter + '" id="se' + counter + '" > <input type="hidden"  name="search' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
    $('#se' + counter).autocomplete({source: availableTags});
counter++;
 });

为了更加清晰，您应该使用jquery元素构造函数并构建元素以获得更多可重用性Demo

 var roleInput = $('<input/>',{
        type:'text',
        placeholder:'Role',
        name:'Role'+counter,
        id:'textbox' + counter
    });

    var searchInput = $('<input/>',{
        type:'text',
        placeholder:'search',
        name:'search'+counter,
        id:'se' + counter
    });

    var hidd=$('<input/>',{
        type:'hidden',
        name:'searchhid'+counter,
        id:'searchhid' + counter
    });


    newTextBoxDiv.append(roleInput).append(searchInput).append(hidd);
    newTextBoxDiv.appendTo("#TextBoxesGroup");
    $('#se' + counter).autocomplete({
        source: availableTags
    });
    counter++;

Answer 2

IDS应始终是唯一的...因为您生成的输入具有相同的ID ..您的HTML变得无效（尽管它有效）..使其工作的一种方法是将ID更改为类...

 <%= text_field_tag('search', nil,:class=> 'se')%>

...<input type="text" placeholder="Search" name="search' + counter + '" class="se" value="" >...

并使用类选择器进行自动完成，

$('.se').autocomplete();

在动态添加的文本框中自动完成

2 个答案: