php - 一页中有多个 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 自动完成脚本的文本框。每当将新文本框添加到 DOM 时，它也应该具有与第一个相同的自动完成功能。

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

第一个文本框

后续文本框

我的文本框的 idInstitutionName[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() {

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

}