Question

我按照W3Schools教程进行了AJAX实时搜索，它一直运行良好。我将我的AJAX结果作为锚元素返回。

我想为Ajax下拉列表添加键盘导航（即向上箭头和向下箭头），我最好的结果是将焦点放在第一个只停留一秒然后焦点的结果上消失。我想知道为什么这个焦点会消失，以及任何解决它的方法。

我的JavaScript代码：

<script type="text/javascript">
    $(document).ready(function(){
        $('#searchInput').keyup(function(e){
            var keyCode = e.keyCode || e.which;
            if (keyCode == 40){
                 $('.hint').first().focus();
                 $('.hint').first().css('color','#E8AE00'); //I can get the focus to here, but the focus will disappear right away.
            }
        })
    })
</script>

这是我的PHP代码：

<?php
    $q = $_GET["q"];
    $xmlDoc = new DOMDocument();
    $xmlDoc -> load("database.xml");
    $rest = $xmlDoc -> getElementsByTagName('restaurant');

    if (strlen($q)>0){
        $hint[] = "";
        $index = 0;
        for ($i = 0; $i < ($rest->length); $i++){
            $name = $rest -> item($i) -> getElementsByTagName('name');
            $link = $rest -> item($i) -> getElementsByTagName('link');
            if ($name -> item(0) -> nodeType == 1){
                if (strtolower($q) == strtolower(substr($name -> item(0) -> childNodes -> item(0) -> nodeValue,0,strlen($q)))){ //if matching
                    $hint[$index] = "<a class='hint' id='hint".$index."' href='".$link -> item(0) -> childNodes -> item(0) -> nodeValue."' onfocus=\"this.style.color='#E8AE00'\">".substr($name -> item(0) -> childNodes -> item(0) -> nodeValue,0,strlen($q))."<b>".substr($name -> item(0) -> childNodes -> item(0) -> nodeValue,strlen($q))."</b></a><br />";
                    $index++;
                }
            }
        }
    }

    if ($hint[0] == ""){
        echo "no suggestion";
    }
    else {
        for ($j = 0; $j < (count($hint)); $j++){
            echo $hint[$j];
        }
    }
?>

感谢。

Answer 1

可能下拉列表正在消失，因为您正在调用$('.hint').first().focus();，这会从（a.k.a模糊）#searchInput中窃取焦点。我认为，模糊输入会隐藏下拉列表，因为你在这里没有包含一些JS代码，这些（正确）隐藏了下拉列表。

我不确定为什么你甚至需要在提示上调用focus()。

Answer 2

您正在使用焦点上的内联javascript事件构建链接，这看起来真的很不合适吗？

<a class='hint' id='hint" ...... onfocus=\"this.style.color='#E8AE00'\">"

另外，请注意您多次生成相同的ID？它们应该是独一无二的！

如果你使用一些jQuery并创建一个委托鼠标事件，然后触发该事件而不是焦点事件，那么它应该很有用吗？

$(function(){
    $(document).on({
        mouseenter: function() {
            $(this).css('color', '#E8AE00')
        }
    }, '.hint');

    $('#searchInput').on('keyup', function(e){
            if (e.which == 40){
                 $('.hint').first().trigger('mouseenter');
            }
    });
});

Ajax下拉菜单的键盘导航（向上和向下箭头）

2 个答案: