javascript - 为什么我的 ajax 元素立即失去焦点？

Question

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

我已连接到 WordPress，在 title 下面添加一个 id 为 suggestions 的 div，并添加一个 javascript onKeyUp 标题事件告诉它向页面发出 ajax 请求，该页面根据目前输入的内容建议名称。这一切都工作正常。

但是，目前我只能通过鼠标单击来选择建议(然后使用 val 更新 #title 的值。我还会希望用户能够使用箭头键选择建议，就像 Google 那样。

我正在通过给予每个建议焦点来构建这个(每行都是一个带有动态生成的 tabindex 的 li 元素。)

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

gethint.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>';
}
?>

JS 代码:

$.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);
        }

    }

这只是当前的测试代码，因此始终将焦点设置到第三个子元素。

Answer 1

我不会尝试专注于建议。在这种情况下，您必须将按键检查代码添加到每个建议中，因为输入将失去焦点。相反，为“重点”建议创建一个 CSS 类，删除上/下键上的类并将其添加到上一个/下一个建议中...

 $input.keyup(function(e) {

    if(e.which == 38) {
        // up key
        var active = $('.suggestions li.active');
        if(active.length) {
            active.removeClass('active');
            active.prev().addClass('active');
        } else {
            $('.suggestions li:last').addClass('active');
        }
    } else if(e.which == 40) {
        // down key
        var active = $('.suggestions li.active');
        if(active.length) {
            active.removeClass('active');
            active.next().addClass('active');
        } else {
            $('.suggestions li:first').addClass('active');
        }

    }
});