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

如何在这个动态添加的文本框中添加自动完成？ 我使用的是$（'#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>

$（文档）.ready（函数（）
{
var计数器=2；
$（“#添加按钮”）。单击（函数（）
{
var newTextBoxDiv=$（document.createElement（'div'））
.attr（“id”，“TextBoxDiv”+计数器）；
newTextBoxDiv.after（）.html(
'  ');
newTextBoxDiv.appendTo（“#textboxsgroup”）；
$（'#se'）.autocomplete（）；
计数器++；
});
“textbox1”）%%>
“se”）%%>

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

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

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

---

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

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

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

---

代码中的字符串浓缩和选择存在问题：-

主要是

$（'#se'+counter.）.autocomplete（{source:availableTags}）

您没有在这里附加计数器。而且也没有源代码。在我刚刚附加hummy源代码的示例中，它可能是静态源代码或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++;
 });

$（“#添加按钮”）。单击（函数（）{
var newTextBoxDiv=$（document.createElement（'div'））
.attr（“id”，“TextBoxDiv”+计数器）；
newTextBoxDiv.after（）.html（“”）；
newTextBoxDiv.appendTo（“#textboxsgroup”）；
$（'#se'+计数器）.autocomplete（{source:availableTags}）；
计数器++；
});

为了更清楚，您应该使用jquery元素构造函数并构建元素以提高可读性

var roleInput=$（''{
类型：'text'，
占位符：'Role'，
名称：'Role'+计数器，
id:“文本框”+计数器
});
var searchInput=$（''{
类型：'text'，
占位符：'搜索'，
名称：'search'+计数器，
id:'se'+计数器
});
变量hidd=$（''{
类型：'隐藏'，
名称：'searchhid'+计数器，
id:“搜索隐藏”+计数器
});
newTextBoxDiv.append（roleInput）.append（searchInput）.append（hidd）；
newTextBoxDiv.appendTo（“#textboxsgroup”）；
$（'#se'+计数器）。自动完成({
资料来源：availableTags
});
计数器++；

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

主要是

$（'#se'+counter.）.autocomplete（{source:availableTags}）

您没有在这里附加计数器。而且也没有源代码。在我刚刚附加hummy源代码的示例中，它可能是静态源代码或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++;
 });

$（“#添加按钮”）。单击（函数（）{
var newTextBoxDiv=$（document.createElement（'div'））
.attr（“id”，“TextBoxDiv”+计数器）；
newTextBoxDiv.after（）.html（“”）；
newTextBoxDiv.appendTo（“#textboxsgroup”）；
$（'#se'+计数器）.autocomplete（{source:availableTags}）；
计数器++；
});

为了更清楚，您应该使用jquery元素构造函数并构建元素以提高可读性

var roleInput=$（''{
类型：'text'，
占位符：'Role'，
名称：'Role'+计数器，
id:“文本框”+计数器
});
var searchInput=$（''{
类型：'text'，
占位符：'搜索'，
名称：'search'+计数器，
id:'se'+计数器
});
变量hidd=$（''{
类型：'隐藏'，
名称：'searchhid'+计数器，
id:“搜索隐藏”+计数器
});
newTextBoxDiv.append（roleInput）.append（searchInput）.append（hidd）；
newTextBoxDiv.appendTo（“#textboxsgroup”）；
$（'#se'+计数器）。自动完成({
资料来源：availableTags
});
计数器++；

Dude，你在重复使用相同的ID，我猜…HTML中不支持重复的ID…Dude，你在重复使用相同的ID，我猜…HTML中不支持重复的ID…感谢你的回复，这里你使用的是字符串数组，但我直接从服务器获取该值。因此，如果Ajax数据源是实时的，你需要设置它fetch else获取数据并在源代码检查中提供此：-我不能使用else case，因为这里将使用大量数据。您可以查看文档以查看哪一个适合您的需要。我想我已修复了您在问题中遇到的问题。：）感谢您的回复，这里您使用的是字符串数组，但我直接从ser获取该值版本？如果是实时获取，你需要设置Ajax数据源，否则获取数据并在源代码中提供检查此：-我不能使用else case，因为这里将使用大量数据。你可以查看文档，看看哪一个适合你的需要。我想我已经解决了你在问题中遇到的问题。：）