You have two issues, when your page loads and the
$("#ItemName").autocomplete
runs, it attaches to all elements with an id of ItemName. If you create a new element with that id then it won't have autocomplete has you haven't told it to attach the autocomplete plug-in to it. Every time you create a new element you should also attach the autocomplete. The easiest way of doing this is to turn your autocomplete attach code into a function and you call that function on document load, and also when you add new items.
That still isn't going to work though :) as an id has to be unique on the page, you can only have one element with the id of ItemName, if you have three then only the first one is recognised. Rather than use ids you will need to use class names, or use "data" attributes to tag the relevant items instead.
Example;
<div id="target">
@foreach (var m in Model)
{
<span>Auto</span>@Html.TextBox("ItemName", null, new {data_autocomplete="data-autocomplete"})<br/>
<span>No auto</span>@Html.TextBox("TestBox")<br/>
}
</div>
<button onclick="return add();">Add</button>
<script type="text/javascript">
$(document).ready(function () {
setup();
});
function add() {
var txt = $("<input type='text'></input>").attr("data-autocomplete", "data-autocomplete");
$("#target").append(txt);
setup();
return false;
}
function setup() {
$("[data-autocomplete]").autocomplete({ source: ["Apple", "April", "Blue", "Brown"] });
}
</script>
Submit an article or tip