Вход отключен в Bootstrap 3 typeahead

Question

Я использую несколько входов в модальном окне загрузки (которое загружается через AJAX). Я хочу, чтобы на этих входах работал typeahead.js, интегрированный с Bloodhound. Наборы данных загружаются правильно (как JSON), но по какой-то причине я не понимаю, что входы автоматически отключены. Я использую самые последние версии всего.

Здесь тег входа (со связанным скрытым вводом). Для завершения построения удаленного URL-кода движок берет данные-автозаполнение.

<input type="text" class="typeahead form-control" data-provide="typeahead" id="my_input" data-autocomplete='users'> 
      <input type="hidden" name="my_input" /> 

Вот мой код JavaScript:

$.get(window.BASE_URL+'/form',function(data){ 
     /*SUGGESTIONS ENGINE*/ 
     var autocomplete; 
     var autocomplete = new Bloodhound({ 
      datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.id); }, 
      queryTokenizer: Bloodhound.tokenizers.whitespace, 
      limit: 20, 
      remote: { 
      url: window.BASE_URL+'the-url/', 
      replace: function(url,uriEncodedQuery) { 
        if(typeof $('input:focus').attr('data-autocomplete')!='undefined') 
        { 
         var new_url=url+$('input:focus').attr('data-autocomplete')+'?texto='+$('input:focus').val()+'&tipo='+$('input:focus').attr('id'); 
         return new_url; 
        } 
      } 
      } 
     }); 

     autocomplete.initialize(); 

     //LOAD TYPEAHEADS 
     $('.modal-body').find('input.typeahead').typeahead({ 
      minLength: 2, 
      highlight:true 
     },{ 
      name: 'autocomplete',  
      displayKey:'label', 
      source: autocomplete.ttAdapter(),    
     }).on('typeahead:selected', function(obj, datum) {   
      //console.log(JSON.stringify(this)); 
      //If the text has an id seeks its hidden twin 
      if(typeof $(this).attr('id')!='undefined') 
       $('input[name="'+$(this).attr('id')+'"]').val(datum.id); 
     }); 
    }); 

Формат элемента от ответа JSon выглядит следующим образом:

{"id":"1","label":"McDonald, Richard"} 

Answer 1

Проблема решена: Вы должны удалить только z-index для элемента.

Перед:

.modal .twitter-typeahead .tt-hint { 
    margin-bottom: 0; 
    z-index: 1; 
    width: 100%; 
} 

После того, как:

.modal .twitter-typeahead .tt-hint { 
    margin-bottom: 0; 
    width: 100%; 
}