Question

我正在尝试创建一个实时搜索功能，该功能将在用户输入时显示结果。目前，我的后端工作正常，并且正在尝试找出前端渲染。

我目前在侧边栏中嵌入了一个搜索栏，我希望在搜索栏下方以下拉列表的形式显示结果。

搜索栏

<form class="form-inline-search" onsubmit="return getSearchResults();">
    <div class="form-group sidebar-search">
        <div class="input-group">
            <input id="searchInput" aria-label="Search" class="form-control search" placeholder="Search for..." type="text" onkeypress="liveSearch()">
            <span class="input-group-btn">
                <button id="searchButton" aria-label="searchButton" class="btn btn-default search" type="submit"><span class="glyphicon glyphicon-search"></span></button>
            </span>
            <div class="dropdown">
                <div class="dropdown-toggle" id="togLiveResults" data-toggle="dropdown">
                    <ul class="dropdown-menu" id="liveResults" aria-labelledby="liveResults"></ul>
                </div>
            </div>
        </div>
    </div>
</form>

我能够将数据库中的结果作为列表选项追加到我的函数中，但是我无法使下拉菜单出现。换句话说，尽管下拉列表已填充，但不会在页面上呈现。

JavaScript

...
success: function(result) {
    $("#liveResults").empty();

    var options = '';
    for (var i = 0; i < result.length; i++) {
        options += "<li>" + result[i].name + "</li>";
    }
    $("#liveResults").append(options);

    if ($('#liveResults').is(":hidden")) {
        $('#togLiveResults').dropdown('toggle');
    }
},
...

我无法使下拉菜单显示结果的原因是什么，我还缺少更多吗？

JSFiddle为例。

已解决 我对某些DOM对象有错误的嵌套。将下拉菜单更改为以下内容可以解决我的问题：

<div class="dropdown">
    <div class="dropdown-toggle" id="togLiveResults" data-toggle="dropdown"></div>
    <ul class="dropdown-menu" id="liveResults" aria-labelledby="liveResults"></ul>
</div>

具有下拉结果的Node.js实时搜索

0 个答案: