Упреждающий ввод с вводом, создаваемым динамически

у меня есть ввод с вводом текста с удаленным источником .. он отлично работает! поэтому, когда я пытаюсь добавить новый ввод с помощью 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);

Как я могу решить это?


typeahead.js bootstrap-typeahead twitter-typeahead bloodhound
person AiD    schedule 11.05.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы добавляете новый вход в DOM динамически, поэтому библиотека TypeaheadJS не знает, что элемент существует для его инициализации.

В вашем обработчике событий click для 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);
}

Затем вы можете изменить обработчик событий щелчка, чтобы явно вызвать инициализацию. ** Я внес несколько изменений в предоставленный вами код, чтобы исправить некоторые синтаксические ошибки:

$( "#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 динамически. Проверьте этот вопрос для некоторых Дополнительная информация.

person whipdancer    schedule 12.05.2016