javascript - 输入内容时实时搜索 div 不显示

Question

我正在使用 angular 进行实时搜索，它有效，但我有 2 个问题。第一个问题，也是最重要的一个问题，是在输入字段中输入内容时，包含无序列表的搜索结果的 div 没有显示。

这是我的结构:

<form id="search-form">
    <input type="text" name="search" id="search" placeholder="Sök på webbplatsen" data-ng-model="query">

    <div id="search-hits">
        <ul id="site-search">
            <li data-ng-repeat="name in names | filter: query | orderBy: 'toString()'">{{name}}</li>
        </ul>
    </div>
</form>

这是控制是否显示的脚本:

function setEventListener(e) {

    var input = document.getElementById('search');
    var scope = angular.element(document.getElementById('site-search')).scope();
    var searchHits = document.getElementById('search-hits');

    var keyValue = String.fromCharCode(e.keyCode);
        keyValue = keyValue.toLowerCase() + keyValue.slice(1);    

            for (i = 0; i < scope.names.length; i++) {

                if (scope.names[i].indexOf(keyValue) === -1) {
                    searchHits.style.display = 'none';

                    if (e.keyCode === 8 && input.value.length === 0) {
                        searchHits.style.display = 'none';
                    }
                    else if (e.keyCode === 8) {
                        searchHits.style.display = 'block';
                        return;
                    }
                }
                else {
                    searchHits.style.display = 'block';
                    return;
                }
            }
}

这是 CSS(使用 SASS):

#search-form {
    position: absolute;
    top: 20px;
    right: 140px;

    input {
        width: 210px;
        height: 30px;
        padding: 0 0 0 10px;
        border: 1px solid black;
    }

    div {
        width: 222px;
        max-height: 150px;
        margin-top: -16px;
        z-index: 1000;
        display: none;

        ul {
            list-style: none;
            padding: 0;

            li {
                @include vertAlign(25px);
                width: inherit;
                padding-left: 10px;
            }
        }
    }
}

这表明当我在输入中输入某些内容时它确实有效，在本例中为“Hans”。创建了一个新的列表项并将其应用于 div，但 div 及其内容未显示在实际 View 中:

下面是它应该如何显示:

在这里您还可以“看到”我的第二个问题，div 没有显示在菜单上方，即使我已经将 z-index: 1000; 放在 div 和菜单上z-index 为 500(我从 div 中删除了 display: none; 这样我就可以看到了)。我不知道出了什么问题，所以希望你们中的某个人知道。

解决方案:我忘记向输入字段添加事件监听器，现在可以了。

Answer 1

我认为这是一个与您的#search-form 的绝对位置相关的 CSS 问题。除非相对于容器定位，否则 z-index 不会起作用。尝试更改您的绝对定位或将 #search-hits ID 设置为相对定位，使其相对于它的绝对父级。然后你的 z-index 应该再次开始工作。

此外，http://codepen.io/anon/pen/NPWzVz

#search-form {
    position: absolute;
    top: 20px;
    right: 140px;
  z-index:9999;
  
  #search-hits {position: relative;display:block;}

    input {
        width: 210px;
        height: 30px;
        padding: 0 0 0 10px;
        border: 1px solid black;
    }

    div {
        width: 222px;
        max-height: 150px;
        margin-top: -16px;
        z-index: 1000;
        display: none;

        ul {
            list-style: none;
            padding: 0;

            li {
              /* note I had to remove your mixin to get this working in CP */
                width: inherit;
                padding-left: 10px;
            }
        }
    }
}

<form id="search-form">
    <input type="text" name="search" id="search" placeholder="Sök på webbplatsen" data-ng-model="query">

    <div id="search-hits">
        <ul id="site-search">
            <li data-ng-repeat="name in names | filter: query | orderBy: 'toString()'">random thing 1</li>
            <li data-ng-repeat="name in names | filter: query | orderBy: 'toString()'">random thing 2</li>
        </ul>
      
    </div>
</form>