Typeahead 动态创建的输入

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 使用相同的 typeahead 添加输入！但它没有用：

$( "#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 了解更多信息。