Javascript 使用jquery将焦点更改为下拉元素

我有以下几点。当我按下向下/向上键时，我可以成功选择不同的值，但焦点仍在主输入框上。我想将焦点移动到所选元素。也就是说，如果我按下向下键，并且选择的元素是johndoe，那么焦点也应该在johndoe元素上，而不是在输入框上

我在代码中设置了以下两项，但它们不起作用

$selected.focus();

及

我做错了什么？

你不能只聚焦一个元素。发件人：

焦点事件在获得焦点时发送到元素。此事件隐式适用于一组有限的元素，例如表单元素等和链接。在最近的浏览器版本中，通过显式设置元素的tabindex属性，可以将事件扩展到包括所有元素类型。元素可以通过键盘命令（如Tab键）或鼠标单击该元素来获得焦点

---

您可以尝试设置tabindex属性

如果要关注列表项，则需要显式为列表项指定tabindex属性。看见但这样做的一个缺点是，您将无法在列表中进一步向下移动，因为输入没有集中

$document.readyfunction{ var$listItems=$'li.autocomplete list'， $div=$'div.autofill'， $input=$‘示例’； $div.hide； $'inputexample'。在'keydown'上，函数e{ var key=e.keyCode， $selected=$listItems.filter'.selected'， $current； $div.show； $listItems.removeClass'selected'； 如果键==40{//向下键 $selected.focus； 如果！$selected.length | |$selected.is'：最后一个孩子的{ $current=$listItems.eq0； }否则{ $current=$selected.next； } }如果键==38{//向上键，则为else 如果！$selected.length | |$selected.is'：第一个孩子{ $current=$listItems.last； }否则{ $current=$selected.prev； } }否则，如果键==13{ var值=$selected.text.split[0]。trim； $input.valvalue； $div.hide； } 如果$current{ $current.addClass'selected'； $current.focus； console.log$current； } }; $'li.autocomplete list'。单击，函数e{ var value=$this.text.split[0].trim； $input.valvalue； $div.hide； }; $'li.autocomplete list'。悬停 函数{$this.addClass'partial_selected'}， 函数{$this.removeClass'partial_selected'} ; }; .选定{ 背景：a4a4a4； } .悬停{ 背景：A9D0F5； } 保险商实验室{ 填充：5px0； } 李{ 填充：6px 3px； } .自动填充{ 宽度：250px； } .输入{ 宽度：250px； 身高：2.2米； 填充：.3em.5em； 显示：块； } 约翰·多伊，加利福尼亚州圣何塞 CA旧金山 约翰·简·圣卡洛斯，加利福尼亚州 我添加了一个计数器变量，如果计数器>1，则只需按向上键、向下键、输入方法调用，同样在再次按Enter键时，我将设置计数器=0，以便获得最后选择的Li。我不是每次都调用removeClass'selected'，而是仅当我的计数器>1时才调用它

---

可能是因为您没有为列表项显式地指定tabindex属性谢谢您的回答，但是如果我不能用up和down键选择元素，那么它就完全破坏了整个过程。有没有更好的方法可以在不破坏现有功能的情况下使用？那么您不应该将焦点更改为其他元素。如果您的输入没有集中，自动完成将无法工作。为什么要关注当前元素？因为当我按enter键选择下拉值时，它会提交表单，而event.preventDefault和event.stopPropogation没有帮助。所以我现在唯一能想到的就是移开焦点。@Raghuveer单击enter键时，您可以避免默认的keydown事件。选中此复选框，感谢您的回答，但重点仍然是输入框，而不是演示中的li元素link@Raghuveer：您希望光标聚焦在Li标记上。通过这个方法，您可以在绑定keyevent时获得向上键、向下键方法调用inputexample@Raghuveer：还想知道你所说的“关注”下拉列表是什么意思1你只想突出显示匹配的LI标记这是我在回答中所做的或2设置光标在LI上的位置。

$current.focus();

      $(document).ready(function () {
    var $listItems = $('li.autocomplete-list'),
        $div = $('div.autofill'),
        $input = $('#example');

    $div.hide();
    var allLI = $(".autocomplete .autocomplete-list");
    var counter = 0;
    $('input#example').on('keydown', function (e) {
        var key = e.keyCode,
            $selected = $listItems.filter('.selected'),
            $current;
        //console.log("Show");
        $div.show();

        counter++;
        if (counter > 1) {
            if (key == 40) { // Down key
                $selected.focus();
                if (!$selected.length || $selected.is(':last-child')) {
                    $current = $listItems.eq(0);
                } else {
                    $current = $selected.next();
                }
            } else if (key == 38) { // Up key
                if (!$selected.length || $selected.is(':first-child')) {
                    $current = $listItems.last();
                } else {
                    $current = $selected.prev();
                }
            } else if (key == 13) {
                var value = $selected.text().split('(')[0].trim();
                $input.val(value);
                $div.hide();
                counter = 0;
            }

            if ($current) {
                allLI.removeClass('selected');
                $current.addClass('selected');
                $current.focus();
            }
        }
    });


    $('li.autocomplete-list').on('click', function (e) {
        var value = $(this).text().split('(')[0].trim();
        $input.val(value);
        $div.hide();
    });

    $('li.autocomplete-list').hover(

    function () {
        $(this).addClass('partial_selected')
    },

    function () {
        $(this).removeClass('partial_selected')
    });

});