json - 在 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%;
}