Bootstrap - Le clavier ne fonctionne pas sur le menu de recherche souple généré dynamiquement pour une zone de texte

Question

J'essaie de créer un menu déroulant générique "soft-search" pour mes boîtes de texte bootstrap, de sorte que lorsqu'un utilisateur tape quelque chose sur le clavier, l'application devrait rechercher dynamiquement l'api back-end rest via ajax et faire apparaître les résultats dans un menu bootstrap généré dynamiquement juste en dessous :

J'utilise le jquery.bind pour lier le keyup de l'entrée pour lire l'entrée et créer dynamiquement cette liste déroulante. Maintenant, la liste déroulante est bien générée, cependant, je veux que lorsque l'utilisateur appuie sur la touche "haut/bas", le focus soit automatiquement déplacé vers le menu déroulant, et ensuite l'utilisateur doit sélectionner son choix en utilisant à nouveau les touches haut/bas pour sélectionner cette option particulière.

Maintenant, la première partie de cet objectif est atteinte - l'accent est mis sur le premier <li> sur la liste déroulante. Cependant, les touches haut/bas ne fonctionnent pas sur la liste déroulante. Par exemple, dans le cas ci-dessus, lorsque je clique sur la touche bas, le focus ne change pas, il reste bloqué sur le premier élément - "test--Foo Bar Limited". Que puis-je faire pour rendre la liste déroulante "navigable" à l'aide des touches fléchées une fois que j'ai mis le focus dessus ? J'ai parcouru beaucoup d'Internet, mais je n'ai pas encore trouvé de solution à ce problème.

Voici mon code pour le keyup où cette liste déroulante est générée :

$("#searchbox").bind("keyup", function(e){
    console.log(e.type, e.which, e.keyCode);
    console.log('keycode:',e.key);
    var text = $(this).val(); //+(e.key=='Backspace' ? '': e.key);
    console.log('text:',text);
    if (e.key=='ArrowUp' || e.key=='ArrowDown') {
        //FOCUS ON THE DROPDOWN AND RETURN
        e.preventDefault();
        $('#thedrop li:first-child a').focus();
        // setTimeout(function() {
        // }, 700);
        return;
    }
    $("#spinner").addClass('glyphicon-refresh glyphicon-spin');
    //REST API CALL:
    $.get("/client/search/" + text, function(data){
        $("#spinner").removeClass('glyphicon-refresh glyphicon-spin');
        //CREATE THE DROPDOWN
        var darray = JSON.parse(data);
        var drop = '<ul tabindex="1" id="thedrop" class="dropdown-menu" role="menu" aria-expanded="true" >';
        for(var i=0;i<darray.length;i++){
            console.log(darray[i]['ein'],'::',darray[i]['company_name']);
            drop += '<li><a tabindex="-1" href="#">' + darray[i]['ein'] + '--' + darray[i]['company_name'] + '</a></li>';
        }
        drop += '</ul>';
        var top = $('#searchbox').offset().top;
        if (darray.length>0) {
            $('#thedrop').remove();
            $('body').append(drop);
            $('#thedrop').css({
                'top':top + $('#searchbox').outerHeight() ,
                'left':$('#searchbox').offset().left,
            });
            $('#thedrop').show();
        }
    });
});

modifier

J'ai regardé este y este questions, mais aucune d'entre elles ne m'aide. Elles proposent toutes deux que bootstrap prenne déjà en charge les touches haut/bas en standard dans une liste déroulante, alors qu'est-ce que je fais mal ?

Answer 1

Le JS de Bootstrap vérifie et génère ses composants JS au démarrage de la page. En tant que tel, et nouveau les éléments ajoutés au DOM après init devront être instancié manuellement .

Pour ce faire, vous devez appeler $('#thedrop').dropdown() après l'avoir ajouté à la body comme ça :

...
if (darray.length>0) {
    $('#thedrop').remove();
    $('body').append(drop);
    $('#thedrop').dropdown(); // <-- Inserted here
    $('#thedrop').css({
        'top':top + $('#searchbox').outerHeight() ,
        'left':$('#searchbox').offset().left,
    });
    $('#thedrop').show();
}
...