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

【问题标题】：Bootstrap - Keyboard not working on dynamically generated soft-search menu for text boxBootstrap - 键盘无法处理为文本框动态生成的软搜索菜单
【发布时间】：2016-12-01 05:07:01
【问题描述】：

我正在尝试为我的引导文本框创建一个通用的“软搜索”菜单下拉菜单，这样当用户在键盘上键入内容时，应用程序应该通过 ajax 和在其下方动态生成的引导菜单中填充结果：

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

现在，第一部分已经完成 - 焦点转移到下拉列表中的第一个 <li> 元素。但是，向上/向下键不适用于下拉菜单。例如，在上述情况下，当我单击向下键时，焦点不会改变，它停留在第一项 - “test--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 的问题，但没有一个能帮到我。他们都建议引导程序已经支持向上/向下键作为下拉菜单中的标准，那么我做错了什么？

【问题讨论】：

我怀疑因为您正在动态插入下拉菜单，所以在将新元素附加到正文后，您需要在新创建的元素上触发 .dropdown()。这是因为 bootstrap 已经在页面初始化时检查了 DOM，并且不会一直在监听要创建的新项目
同样，我不确定e.key 是检测箭头的最佳方法，我建议e.which 其中38 = 向上箭头和40 = 向下箭头
@haxxxton 非常感谢！运行$('#thedrop').dropdown() 成功了。请写下来作为答案，以便我接受。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

Bootstrap 的 JS 在页面初始化时检查并生成其 JS 组件。因此，在初始化之后添加到 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();
}
...

【讨论】：