Bootstrap 预输入不显示结果

Question

我在 Laravel 5.3 中使用 https://github.com/bassjobsen/Bootstrap-3-Typeahead。

我之前使用的是 twitter 版本，效果很好，只是样式被破坏了。所以我切换到这个版本，但下拉菜单没有被渲染。控制台中也没有错误。

如果我在开发工具中打开网络选项卡，我可以看到正在发出请求并且正在成功返回数据。它只是不呈现建议下拉框。

有人知道为什么会这样吗？

<input type="text" id="search" data-provide="typeahead" autocomplete="off">

 var engine = new Bloodhound({
     remote: {
         url: '/find?q=%QUERY%',
         wildcard: '%QUERY%'
     },
     datumTokenizer: Bloodhound.tokenizers.whitespace,
     queryTokenizer: Bloodhound.tokenizers.whitespace
   });
   engine.initialize();

   $("#search").typeahead({
       hint: true,
       highlight: true,
       minLength: 0,
       source:engine.ttAdapter()
   });

Answer 1

看看我的 jsfiddle https://jsfiddle.net/yqy995wv/

HTML

<div id="remote">
  <input class="typeahead" type="text" placeholder="Oscar winners for Best Picture">
</div>

JS

jQuery(document).ready(function($){
    var bestPictures = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: 'https://twitter.github.io/typeahead.js/data/films/queries/%QUERY.json',
            wildcard: '%QUERY'
        }
    });

    $('#remote .typeahead').typeahead(null, {
        name: 'best-pictures',
        display: 'value',
        source: bestPictures
    });
});

您的 JSON 响应应该是这样的

[
  {
    "value": "All Quiet on the Western Front",
  },
  {
    "value": "Gentleman's Agreement",
  },
  {
    "value": "All the Kings Men",
  },
  {
    "value": "All About Eve",
  },
  {
    "value": "An American in Paris",
  },
  {
    "value": "Around the World in 80 Days",
  },
  {
    "value": "The Apartment",
  }
]