web-dev-qa-db-fra.com

Bootstrap 4 Typeahead

J'utilise jQuery Bootstrap Typeahead . J'obtiens des données de mon fichier mais le menu déroulant typeahead n'est pas renseigné/affiché.

Voici mon JS:

(function() {
    "use strict";

    var $input = $('.typeahead');

    $('.typeahead').typeahead({
        source: function (query, process) {
            return $.getJSON(
                'url-to-file.php',
                { query: query },
                function (data) {
                    console.log(data)
                    return process(data);
                })
        }
    });

})();

console.log() renvoie un tableau JSON (correct):

[ "item1", "item2", ... ]

Mais je ne sais pas quoi faire après. Merci pour ton aide

javascriptjquerytwitter-bootstrapbootstrap-4bootstrap-typeahead
5
Fredmat

La source de données doit être ...

[{name:"item1","id":"1"},{name:"item2","id":"2"},etc..]

Et puis utilisez data-provide sur une entrée comme celle-ci ...

   <div class="input-group">
       <input type="text" data-provide="typeahead" class="form-control typeahead border-primary" name="query" id="query" placeholder="search..." autocomplete="off">
   </div>

Démo de travail sur Codeply

Edit: Vous pouvez également utiliser un tableau de chaînes simple : https://www.codeply.com/go/knBpcbhlFE

4
Zim