Question

我正在尝试为我的引导程序文本框创建一个通用的“软搜索”菜单下拉列表，以便当用户在键盘上键入内容时，应用程序应通过ajax动态查找后端其余的api和将结果填充在其下方的动态生成的引导菜单中：

我使用jquery.bind绑定输入的keyup事件来读取输入并动态创建此下拉列表。现在，下拉菜单生成正常，但是，我希望当用户按下“向上/向下”键时，焦点应自动切换到下拉菜单，然后用户应再次使用向上/向下键选择他们的选择选择那个特定的选项。

现在，实现了第一部分 - 焦点转移到下拉列表中的第一个<li>元素。但是，向上/向下键不在下拉列表中工作。例如，在上面的情况下，当我点击向下键时，焦点不会改变，它仍然停留在第一项 - “测试 - Foo Bar Limited”。一旦我将焦点移到它上，我可以做什么才能使用箭头键使下拉菜单“可导航”？我已经清理了很多互联网，但还是无法找到解决方案。

以下是生成此下拉列表的keyup事件的代码：

$("#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();
        }
    });
});

修改

我查了this和this个问题，但没有一个能帮助我。他们都建议bootstrap在下拉列表中已经支持up / down键作为标准，那么我做错了什么？

Answer 1

Bootstrap的JS在init页面检查并生成其JS组件。因此，在init之后添加到DOM的 new 项需要为manually instantiated。

要执行此操作，您需要在将$('#thedrop').dropdown()附加到body之后致电... 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(); } ...，如下所示：

range([start], stop[, step])

Bootstrap - 键盘无法处理动态生成的文本框软搜索菜单

1 个答案: