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",
  }
]

Bootstrap typeahead不显示结果

1 个答案: