Multiple jQuery autocomplete in one page - php

Question

UPDATE
I checked the dropdown elements and it seems that the succeeding dropdown elements are not populated by the
.data( 'ui-autocomplete' )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append(
'<a class="select-group"><span class="mini-headtitle">' + item.institution_name +
'</span><br/><span class="mini-subtitle">' + item.municipality + '</span></a>' )
.appendTo( ul );
};
}
part. But the "missing" elements still has the items needed! How do I solve this?
PROBLEM
I have dynamically added textboxes which correspond to a jQuery Autocomplete script.
Whenever a new textbox is added to the DOM, it should also have the same autocomplete from the first.
Autocomplete works on all newly added DOM textboxes but only the first instance has its select box filled with options.
First textbox
Succeeding textboxes
My textboxes have the id InstitutionName[1] where the number grows as more elements are added.
I use the code below:
function ajax_connect_to_db()
{
$('input[id^="InstitutionName"]')
.autocomplete({
minLength: 0,
source: "new_account/get_institution_info_db",
dataType: "json",
focus: function( event, ui ) {
$( this ).val( ui.item.institution_name );
return false;
},
select: function( event, ui ) {
// get unique textbox number inside brackets
var str = $(this).attr('id');
var pos = str.indexOf("[") + 1;
var index = str.slice(pos, str.lastIndexOf("]"));
// fill in the respective textboxes
$(this).val( ui.item.institution_name );
$( 'input[id="InstitutionID['+ index +']"]' ).val( ui.item.id );
$( 'input[id="InstitutionMunicipality['+ index +']"]' ).val( ui.item.municipality );
$( 'input[id="InstitutionProvince['+ index +']"]' ).val( ui.item.province );
return false;
}
})
.data( 'ui-autocomplete' )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append(
'<a class="select-group"><span class="mini-headtitle">' + item.institution_name +
'</span><br/><span class="mini-subtitle">' + item.municipality + '</span></a>' )
.appendTo( ul );
};
}
// target newly added DOM textboxes
setInterval( ajax_connect_to_db, 100 );
How do I make the select box show its content on all dynamically added elements?

Answer 1

try this
function ajax_connect_to_db()
{
$(function() {
.................
});
}