一个页面中有多个jQuery自动完成功能

Question

更新

我检查了下拉元素，似乎后续的下拉元素没有被

填充

    .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 );
    };
}  

一部分。 但“缺失”的元素仍然需要物品！我该如何解决这个问题？

问题

我已经动态添加了与jQuery Autocomplete脚本相对应的文本框。 每当将新文本框添加到DOM时，它也应该具有与第一个相同的自动完成。

自动填充适用于所有新添加的DOM文本框，但只有第一个实例的选择框中填充了选项。

第一个文本框

成功完成文本框

我的文本框的ID为InstitutionName[1]，随着更多元素的添加，数字会增加。

我使用下面的代码：

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 ); 

如何让选择框在所有动态添加的元素上显示其内容？

Answer 1

试试这个

function ajax_connect_to_db()
{

$(function() {

   .................
});

}