The function below formats a text field for autocompletion based on
the element id. The thing is, that when a user begins typing in the
field, another row with the same name will appear beneath it, so that
the input fields wind up looking like this:
<input id="months" type="text" name="months[]" value="" />
<input id="months" type="text" name="months[]" value="" />
<input id="months" type="text" name="months[]" value="" />
Since each input field can only have one id, and the id has to be
unique, I'm trying to figure out how to assign the autocomplete
function to each of these input fields whenever they appear? I
thought maybe if I could just partially match the name?
This is the autocomplete function:
$('#months').autocomplete({
width: 300,
delimiter: /(,|;)\s*/,
lookup:
'January,February,March,April,May,June,July,August,September,October,November,December'.split
(',')
});
This is the auto append function:
$( function(){
$("#months > tbody > tr > td > input").bind('click', function()
{
var row = $(this).closest("tr").get(0);
if( row.className.indexOf("clicked")==-1 )
{
$(row).closest("tbody").append
($(row).clone(true));
row.className+="clicked";
}
});
});
I did try to use a class instead, but it still only assigned the
autocomplete values to the first row and not subsequent ones:
jQuery(function() {
$('input.monthname').autocomplete({
width: 300,
delimiter: /(,|;)\s*/,
lookup:
'January,February,March,April,May,June,July,August,September,October,November,December'.split
(',')
});
});
I also tried this, but didn't even get the autocomplete on the first
row:
$( function(){
$("#months > tbody > tr > td > input").bind('click', function()
{
var row = $(this).closest("tr").get(0);
if( row.className.indexOf("clicked")==-1 )
{
var rowCopy=$(row).clone(true);
$(row).closest("tbody").append
(rowCopy);
row.className+="clicked";
var newInput=$("input",rowCopy).get
(0);
newInput.id="newId";
$(newInput).bind('keyup',function() {
$(this.id).autocomplete({
width: 300,
delimiter: /(,|;)\s*/,
lookup:
'January,February,March,April,May,June,July,August,September,October,November,December'.split
(',')
});
});
}
});
});
