php - 1 ページに複数の 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 テキストボックスで機能しますが、選択ボックスにオプションが入力されているのは最初のインスタンスのみです。

最初のテキストボックス

後続のテキストボックス

InstitutionName[1]私のテキストボックスには、要素が追加されるにつれて番号が大きくなるIDがあります。

以下のコードを使用します。

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() {

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

}