Question

这是我的代码：

Html：

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

一旦在搜索框中提供输入，

livesearch.php就会返回结果。我在上面的代码中做了哪些更改，以便在搜索结果中提供导航键支持，并在页面的任何其他区域按下鼠标后删除结果？

提前致谢。

Answer 1

您可以将所有特定搜索结果放在自己的DIV容器中，作为#livesearch DIV的子项。

在你的键盘功能中使用函数的事件参数来获取上下键的keyCodes：

left = 37
up = 38
right = 39
down = 40

然后使用其他功能聚焦所需的搜索结果。

希望这会有所帮助。

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

1 个答案: