1

如何在这个动态添加的文本框中添加自动完成？我用过这种方式$('#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>
4

2 回答 2

1

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

主要是$('#se' + counter).autocomplete({source: availableTags});你没有在这里附上柜台。而且也没有来源。在示例中，我刚刚附加了简单的源代码，在您的情况下它可以是静态源代码或 ajax。

有关详细信息，请参阅文档...

演示

尝试这个：-

$("#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 元素构造函数并构建元素以获得更多可读性演示

 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++;
于 2013-05-13T16:44:56.493 回答
0

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

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

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

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

$('.se').autocomplete();
于 2013-05-13T16:40:24.653 回答