Question

我有一个带有远程源的typeahead的输入..它工作正常！所以当我尝试通过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();

在这里，我将尝试使用相同类型的typeahead添加带有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库不知道该元素是否存在以初始化它。

在click的{{1}}事件处理程序中，您需要显式初始化新控件。我还要将typeahead的addbtn拉出到一个可以重用的单独变量中（假设你想重用大部分设置）。

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

最后，这只是一种可能的方法。根本问题是您必须计划处理动态添加到DOM的任何元素。查看this question了解更多信息。

Typeahead，输入动态创建

1 个答案: