Question

我正在使用角度进行实时搜索，它有效，但我遇到了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;
            }
        }
    }
}

这表明当我在输入中键入内容时它确实有效，在这种情况下＆＃34; Hans＆＃34;。创建一个新的列表项并将其应用于div，但div和它的内容不会显示在实际视图中：

console view

以下是它应该如何显示：

search

在这里你也可以＆＃34;看＆＃34;我的第二个问题，div没有显示在菜单上方，即使我已将z-index: 1000;放在div上，菜单的z-index为500（我删除了{{1来自div所以我可以看到这个）。我无法弄清楚哪些是错的，所以希望你们有人知道。

解决方案：我忘了在输入字段中添加一个事件监听器，现在它可以工作了。

Answer 1

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

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

＆＃13;

#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;
            }
        }
    }
}

＆＃13;

<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>

＆＃13;

输入内容时，实时搜索div不会显示

1 个答案: