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

如何在此动态添加文本框中添加自动完成功能？我用这种方式$（'＃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>

来源

2013-05-13 user2342350

伙计，你是reus相同的ID我猜...重复ID不支持在HTML中... – 2013-05-13 16:32:24

有与串concatination和选择你的代码的问题： -

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

见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的元素构造和建造lements更多readeability 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++;

来源

2013-05-13 16:44:56 PSL

感谢您的答复，在这里你使用的是字符串数组，但我直接从服务器获取该值。所以？ – user2342350 2013-05-13 16:54:16

您需要设置Ajax数据源，如果它是实时获取其他获取数据并在源代码中提供它检查此： - http://jqueryui.com/autocomplete/#remote-jsonp – PSL 2013-05-13 17:00:13

我不能使用其他情况下，因为这里庞大的数据将被使用 – user2342350 2013-05-13 17:07:56

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-13 16:40:24 bipen

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

回答

相关问题