動態添加文本框中的自動完成

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

動態添加文本框中的自動完成

回答

相關問題