Keyboard navigation (up & down arrow) for Ajax drop down

Question

I followed W3Schools tutorial on making the AJAX live search, and it has been working fine. I return my AJAX results as anchor elements.

I'd like to add keyboard navigation (i.e. up arrow and down arrow) for the Ajax drop-down, and my best result is to get the focus on the first result that stays only for a second then the focus disappears. I wonder why this focus disappears, and any way to get around it.

My JavaScript code:

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

This is my PHP code:

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

Thanks.

Answer 1

Probably the dropdown is disappearing because you're calling $('.hint').first().focus();, which steals the focus from (a.k.a blurs) #searchInput. Blurring the input, I assume, hides the dropdown due to some JS code that you didn't include here, which (correctly) is hiding the dropdown.

I'm not sure why you even need to call focus() on the hint.

Answer 2

You're building the links with an inline javascript event on focus, which seems really uneccessary?

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

also, note that you are generating the same ID multiple times? They should be unique!

If you use some jQuery and create a delegated mouse event, and then trigger that event instead of the focus event, it should most likely work ?

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

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