2017-02-14 12 views
0

Я использую https://github.com/bassjobsen/Bootstrap-3-Typeahead с Laravel 5.3.Bootstrap typeahead not results results

Я использовал версию twitter перед рукой, которая отлично работала, за исключением того, что стили были сломаны. Поэтому я переключился на эту версию, но выпадающее меню не отображается. В консоли нет ошибок.

Если я открою вкладку сети в инструментах dev, я вижу, что выполненный запрос и данные успешно возвращаются. Это просто не отображает раскрывающийся список предложений.

Кто-нибудь знает, почему это может быть?

<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() 
    }); 
+0

У вас есть ошибки? –

+0

@SaravananSampathkumar См. Сообщение - «В консоли нет ошибок». – ProEvilz

+0

Можете ли вы разместить здесь свой ответ json? –

ответ

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

Это версия twitter ... Я не использую это, я использую typeahead, на который я разместил ссылку. – ProEvilz