Bootstrap typehead未显示结果

Question

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

我之前使用的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", 
    } 
]