如何在即时搜索结果上编码导航键

这是我的代码:

<input onkeyup="showResult(this.value)" id="tsearch" class="search-query form-control" type="text" placeholder="Search here ..." name="tsearch"></input>
<div id="livesearch" style="border: 0px none;">

脚本:

<script>
    function showResult(str) {
        if (str.length == 0) {
            document.getElementById("livesearch").innerHTML = "";
            document.getElementById("livesearch").style.border = "0px";
            return;
        }
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {  // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("livesearch").innerHTML = xmlhttp.responseText;
                document.getElementById("livesearch").style.border = "1px solid #A5ACB2";
            }
        }
        xmlhttp.open("GET", "livesearch.php?q=" + str, true);
        xmlhttp.send();
    }
</script>

livessearch .php将返回结果。我必须对上面的代码进行哪些更改，以便在搜索结果上提供导航键支持，并在页面的任何其他区域按下鼠标后删除结果?