JQuery динамически формировать элементы и автозаполнение

Я этот код, который добавляет два поля, и я хотел бы сделать вклад, чтобы иметь функцию автозаполнения:JQuery динамически формировать элементы и автозаполнение

$("#addElem").click(function() { 

       var new_id = new Date().getTime(); 

       var content = '<div id="fields"><input type="hidden" name="softwarePerAsset.Index" value="' + new_id + '" />' + 
       '<select name="softwarePerAsset[' + new_id + 
       '].name" id="softwarePerAsset[' + new_id + 
       '].name"> <option value="1">Visio</option><option value="2">Painter</option></select>&nbsp;&nbsp;&nbsp;' + 
       '<input type="text" name="softwarePerAsset[' + new_id + '].serial" id="softwarePerAsset[' + new_id + 
       '].serial">&nbsp;&nbsp;&nbsp;<a id="test" href="#">Remove Software</a></div>'; 

       $("#elem").append(content); 

      });

Я попытался добавить это, но ничего не работает:

var data = "notepad firefox chrome".split(" "); 
content.find('input[type=text]').autocomplete(data);

Что мне не хватает?

ОБНОВЛЕНИЕ # 1 - ПОЛНОЕ PAGE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 



<html xmlns="http://www.w3.org/1999/xhtml" > 

<head><title> 

    Index 

</title></head> 

<body> 

    <form action="/element/edit" method="post"> 

     <div id="elem"> 

      <!-- If there are software installed, then s --> 

      <div class="fields"> 

       <input type="hidden" name="softwarePerAsset.Index" value="1" /> 

       <select name="softwarePerAsset[1].name" id="softwarePerAsset[1].name"> 

        <option value="1">Visio</option> 

        <option value="2">Painter</option> 

       </select>&nbsp;&nbsp; 

       <input type="text" name="softwarePerAsset[1].serial" id="softwarePerAsset[1].serial" />&nbsp;&nbsp; 

       <a class="test" href="#">Remove Software</a> 

      </div> 

      <div class="fields"> 

       <input type="hidden" name="softwarePerAsset.Index" value="2" /> 

       <select name="softwarePerAsset[2].name" id="softwarePerAsset[2].name"> 

        <option value="1">Visio</option> 

        <option value="2">Painter</option> 

       </select>&nbsp;&nbsp; 

       <input type="text" name="softwarePerAsset[2].serial" id="softwarePerAsset[2].serial" />&nbsp;&nbsp; 

       <a class="test" href="#">Remove Software</a> 

      </div> 



      </div><a href="#" id="addElem">Add Element</a> 

     <br /> 

     <br /> 



     <input type="submit" name="btnSubmit" value="Submit" /> 

    </form> 



    <script src="/jquery-1.9.1.js" type="text/javascript"></script> 

    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 



    <script type="text/javascript"> 

     $(function() { 



      //add element to elem div 

      $("#addElem").click(function() { 



       var new_id = new Date().getTime(); 



       var content = '<div class="fields"><input type="hidden" name="softwarePerAsset.Index" value="' + new_id + '" />' + 

       '<select name="softwarePerAsset[' + new_id + 

       '].name" id="softwarePerAsset[' + new_id + 

       '].name"> <option value="1">Visio</option><option value="2">Painter</option></select>&nbsp;&nbsp;&nbsp;' + 

       '<input type="text" name="softwarePerAsset[' + new_id + '].serial" id="softwarePerAsset[' + new_id + 

       '].serial">&nbsp;&nbsp;&nbsp;<a id="test" href="#">Remove Software</a></div>'; 



       $("#elem").append(content); 



       var data = "notepad firefox chrome".split(" "); 

       $(content).find('input[type=text]').autocomplete(data); 



      }); 



      //remove fields 

      $("#elem").on("click", ".test", function() { 

       $(this).closest("div.fields").remove(); 

      }); 

     }); 

    </script> 

</body> 

</html>

источник

2013-05-14 mpora

Я решил так:

Добавлен класс для ссылки на поля ввода:

источник

<input class="serial" type="text" name="softwarePerAsset[1368553379670].serial" id="softwarePerAsset[1368553379670].serial">

Данные были определены следующим образом:

var options = { 
     source: ["notepad", "firefox", "chrome"] 
    };

Затем инициировать событие autocomplete

$("#elem").on("keydown.autocomplete", "input.serial", function() { 
     $(this).autocomplete(options); 
    });

источник

2013-05-14 17:46:37 mpora

content это просто строка с HTML. Вы должны это сделать JQuery объект $(content)

$(content).find('input[type=text]').autocomplete(data);

источник

2013-05-14 16:00:26

Ничего не происходит. Я опубликовал полную страницу. – mpora

Получаете ли вы какую-либо ошибку на консоли? –

Ошибок в консоли нет. – mpora

JQuery динамически формировать элементы и автозаполнение

ответ

Смежные вопросы