1

AJAXライブ検索の作成に関するW3Schoolsチュートリアルに従いましたが、正常に機能しています。AJAX の結果をアンカー要素として返します。

Ajax ドロップダウンにキーボード ナビゲーション (つまり、上向き矢印と下向き矢印) を追加したいと考えています。私の最良の結果は、最初の結果にフォーカスを当て、それが 1 秒間だけ表示された後、フォーカスが消えることです。なぜこの焦点が消えるのか、それを回避する方法があるのだろうか。

私の 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];
        }
    }
?>

ありがとう。

4

2 に答える 2

0

$('.hint').first().focus();を呼び出しているため、ドロップダウンが消えている可能性があります#searchInput。入力をぼかすと、ここに含めなかったJSコードが原因でドロップダウンが非表示になり、(正しく)ドロップダウンが非表示になっていると思います。

focus()なぜヒントを呼び出す必要があるのか​​ わかりません。

于 2012-10-16T06:52:07.717 に答える
0

インライン 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');
            }
    });
});
于 2012-10-16T07:04:50.753 に答える