Q:

Live search div not showing up when something is entered

I'm making a live search with angular, it works but I have 2 problems. The first problem, the most important one, is that the div containing the unordered list of search hits isn't showing up when something is typed into the input field. 
Here's my structure:
<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>

Here's the script controlling whether to show it or not:
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;
                }
            }
}

And here's the CSS(Using 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;
            }
        }
    }
}

And this shows that it does actually work when I type something in the input, in this case "Hans". A new list item is created and applied to the div, but the div and it's content isn't showing up in the actual view:

And here's how it should be displayed:

Here you can also "see" my second problem, the div doesn't show up above the menu, even though I've put z-index: 1000; on the div and the menu has a z-index of 500 (I removed the display: none; from the div so I could see this). I can't figure out what's wrong so hopefully someone of you might know. 
SOLUTION: I had forgotten to add an event listener to the input field, now it works. 

A:

I think it's a CSS issue with the absolute position of your #search-form. A z-index isn't going to work unless it's positioned relative to it's container. Try changing your absolute positioning or setting the #search-hits ID to position relative so it's relative to it's absolute parent. Then your z-index should start working again. 
Also, 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>

