为什么我的ajax元素立即失去了焦点

我正在尝试在Wordpress的标题字段中添加一个自动完成选项-我的自定义文档类型之一的标题通常(但并不总是)有一个标准名称。

我已经钩到Wordpress添加一个div与suggestions下面的title的id，并添加一个javascript onKeyUp事件的标题告诉它使一个ajax请求到一个页面，建议基于什么类型到目前为止的名字。一切正常。

目前，然而，我只能通过鼠标点击来选择建议(然后使用val来更新#title的值)。我还希望用户能够使用箭头键来选择建议，就像谷歌一样。

我正在努力通过给每个建议焦点来构建这个(每行是一个li元素和一个动态生成的tabindex)

这工作了一瞬间-预期的元素得到焦点-但随后它立即失去它，回到body。为什么会发生这种情况?

gething .php代码:

<?php
$sofar = stripslashes($_GET['sofar']); // This is important as otherwise the url gets confused and won't work on anything with an apostrophe in it.
$common_file_names = array(
    "Here's suggestion 1",
    "This is suggestion 2",
    "Suggestion 3");
if(strlen($_GET['sofar'])>1) { //Ignores single letters
    echo '<ul id="autocomplete">';
    $tabindex=0;
    foreach ($common_file_names as $suggestion) {
        if(false !== stripos($suggestion, $sofar)) : ?>
            <li 
            tabindex="<?=$tabindex?>" 
            onClick="acceptSuggestion('<?=addslashes($suggestion)?>')"
            onBlur="console.log('Lost focus!'); console.log(document.activeElement);";
            ><?=$suggestion?></li>
        <?php $tabindex++; endif;
    }
    echo '</ul>';
}
?>

$.ajaxSetup({ cache: false });
window.onload = function () {
    $( "<div id='suggestions'></div>" ).insertAfter( "#title" );
    $(document).on('keydown', '#title', function (){
          var hint_slash = this.value;
          showHint(hint_slash);
          checkKey(event);
    });

    $(document).on('focus', '#acf-field-extranet_client_area', function (){
         clearSuggestions();
    });
    $(document).on('focus', '#acf-field-extranet_document_type', function (){
         clearSuggestions();
    });
    $(document).on('focus', '#acf-date_picker', function (){
         clearSuggestions();
    });
    $(document).on('focus', '#acf-file-value', function (){
         clearSuggestions();
    });

    console.log("Scripts loaded successfully");
}
function showHint(str) { //If the user has typed 2 or more characters, this function looks for possible matches among common document names to speed up data entry.
    var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("suggestions").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "/gethint.php?sofar=" + str, true);
        xmlhttp.send();
}

function acceptSuggestion(str) {
    $('#title').val(str); //Puts the clicked suggestion into the title box.
    clearSuggestions();
}
function clearSuggestions() {
    showHint(""); //Clears suggestions.
}
function checkKey(event) {
    console.log('Key press: ' + event.keyCode);
    if(40 == event.keyCode) {
        event.preventDefault(); // Stops scrolling.
        var autocomplete =  $("#autocomplete");
        $(autocomplete.children('li:nth-child(' + 2 + ')')).focus() ;
        console.log(document.activeElement);
        }
    }

这只是目前的测试代码，因此总是将焦点设置为第三个子元素。