入力をダイナミックに作成した先読み

Question

リモート入力で先読みの入力があります。うまくいきます！だから私はJqueryで新しい入力を追加しようとするとうまくいきません！ここで

<input name="name" class="form-control typeahead typeaheadFluxClient" type="text"> 

<script type="text/javascript"> 
var flux = new Bloodhound({ 
     datumTokenizer: function(item) { 
      return Bloodhound.tokenizers.whitespace(cleanAcronym(item.nom)); 
     }, 
     queryTokenizer: function(query) { 
      return Bloodhound.tokenizers.whitespace(cleanAcronym(query)); 
     }, 
     limit: 10, 
     remote: { 

     url: 'remote Url !', 
     replace: function (url, query) { 
      if ($('.typeaheadFluxClient:focus').val()) { 
       url += '?title=' + $('.typeaheadFluxClient:focus').val(); 
      } 
      return url; 
     }, 
     ttl:1, 
     filter: function(list) { 
      return $.map(list, function(ligne) { return {id:ligne.page_id}}); 
     } 

     } 
    }); 
function initTypeAhead(no) { 
    var selection='.typeahead'; 
    if (no) { 
     selection = selection+'-'+no; 
    } 
    $('.typeaheadFluxClient').typeahead({minLength: 1}, { 
     name: 'flux', 
     displayKey: 'nom', 
     source: flux.ttAdapter(), 

     templates: { 
      empty: [ 
       'no type ahead', 
       '@lang('events.no_typeahead')', 
       '<span class="empty-message-details">', 
       'no type ahead', 
       '</span>', 
       '</div>' 
      ].join('\n'), 
      suggestion: function (datum) { 
       var html=datum.nom; 

       return html 
      } 
     } 
    }); 
} 
flux.initialize(); 
initTypeAheadClientFluxPages(); 

私は先行入力の同じクラスでjQueryを使って入力を追加しようとします：

は私のコードがあります！それは動作しませんでした：

$("#addbtn").on("click", function() { 
    var count = $(".associateFluxCLient").length; 
    var html = `<hr> 

        <div class="form-group"> 
         <label for="object" class="col-sm-2 control-label">Nom</label> 
         <div class="col-sm-10"> 
          <input name="fluxClientPageTitle[`+count+`]" class="form-control typeahead typeaheadFluxClient" type="text" > 
         </div> 
        </div> 
`; 
    $("#container").append(html); 

どうすれば解決できますか？

Answer 1

DOMに新しい入力を動的に追加しているため、TypeaheadJSライブラリは、要素を初期化するための要素が存在しないことを認識しています。

addbtnのclickイベントハンドラーでは、明示的に新しいコントロールを初期化する必要があります。私はまた、先読み用のoptions hashを再利用できる別の変数に引き出します（ほとんどの設定を再利用したいと仮定します）。

var taOptsHash = { 
    minLength: 1 
}, { 
    name: 'flux', 
    displayKey: 'nom', 
    source: flux.ttAdapter(), 
    templates: { 
     empty: [ 
      'no type ahead', 
      '@lang('events.no_typeahead')', 
      '<span class="empty-message-details">', 
      'no type ahead', 
      '</span>', 
      '</div>' 
     ].join('\n'), 
     suggestion: function (datum) { 
      var nom = datum.nom; 
      return nom; 
     } 
    } 
}; 

これを実行すると、initTypeAhead関数を変更して再利用できるようになります。

function initTypeAhead(optsHash) { 
    $('.typeaheadFluxClient').typeahead(optsHash); 
} 

次にあなたが明示的に初期化を呼び出すためにあなたのクリックイベントハンドラを変更することができます：あなたが実際に機能でどこでもそれを使用していないので、**私はあなたに渡している元の変数を削除しました。これはおそらく、それを処理するためのひとつの方法である、最後に

$("#addbtn").on("click", function() { 
    var count = $(".associateFluxCLient").length; 
    var newEl = '<hr>'; 
     newEl += '<div class="form-group">'; 
     newEl += '<label for="object" class="col-sm-2 control-label">Nom</label>'; 
     newEl += '<div class="col-sm-10">' 
     newEl += '<input id="fluxClientPageTitle[` + count + `]" name="fluxClientPageTitle[` + count + `]" class="form-control typeahead typeaheadFluxClient" type="text" >'; 
     newEl += '</div>'; 
     newEl += '</div>'; 
    $("#container").append(newEl); 
    initTypeAhead(taOptsHash); 
}); 

：**私はあなたには、いくつかの構文エラーを修正するために提供されたコードにいくつかの変更を加えました。根本的な問題は、DOMに動的に追加する要素を処理することを計画する必要があることです。詳細については、this questionをご覧ください。