Автозаполнение в динамически добавленное текстовое поле

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

были проблемы с струнной concatination и выбора в коде: -

Главное - $('#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 элемент конструктора и строить 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++; 

Answer 2

IDS всегда должен быть уникальным ... так как ваши генерируют вход с одинаковым идентификатором .. ваш HTML становится недействительным (хотя он работает) .. один способ сделать это работой для изменения идентификаторов в класс. ..

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

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

и использовать селектор класса для автозаполнения,

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