Question

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

我在代码中设置了以下两项内容，但它们无法正常工作

$selected.focus();

和

$current.focus();

我做错了什么？

Answer 1

您不能只focus() <li>元素。来自the docs：

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

您可以尝试设置tabindex属性。

Answer 2

如果要关注列表项，则需要为列表项显式指定tabindex属性。见http://jsfiddle.net/tkay/40ctx17s/1/。但是这样做的一个缺点是，由于输入没有集中，你将无法在列表中进一步向下移动。

$(document).ready(function () {
    var $listItems = $('li.autocomplete-list'),
        $div = $('div.autofill'),
        $input = $('#example');

    $div.hide();

    $('input#example').on('keydown', function (e) {
        var key = e.keyCode,
            $selected = $listItems.filter('.selected'),
            $current;

        $div.show();

        $listItems.removeClass('selected');

        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();
        }

        if ($current) {
            $current.addClass('selected');
            $current.focus();
            console.log($current);
        }
    });


    $('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') }
    );

});

.selected {
    background: #a4a4a4;
}
.hover {
    background: #A9D0F5;
}
ul {
    padding: 5px 0;
}
li {
    padding: 6px 3px;
}
.autofill {
    width: 250px;
}
.input {
    width: 250px;
    height: 2.2em;
    padding: .3em .5em;
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="text" class="input" name="example" id="example" placeholder="example..." autocomplete="off" list="examplelist" />

<div class="autofill">
    <ul class="autocomplete">
        <li class="autocomplete-list" tabindex="-1">John Doe (San Jose, CA)</li>
        <li class="autocomplete-list" tabindex="-1">Jane Doe (San Francisco, CA)</li>
        <li class="autocomplete-list" tabindex="-1">John Jane (San Carlos, CA)</li>
    </ul>
</div>

在OP评论后更新了答案

$(document).ready(function () {
    var $listItems = $('li.autocomplete-list'),
        $div = $('div.autofill'),
        $input = $('#example');

    $div.hide();

    $('input#example').on('keydown', function (e) {
        var key = e.keyCode,
            $selected = $listItems.filter('.selected'),
            $current;

        $div.show();

        $listItems.removeClass('selected');

        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) {
            if ($selected.length){
            e.preventDefault();
           }
            var value = $selected.text().split('(')[0].trim();
            $input.val(value) ;
            $div.hide();
        }

        if ($current) {
            $current.addClass('selected');
           
        }
    });


    $('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') }
    );

    $("#frm").submit(function(){
        console.log('submitted');
    });
});

.selected {
    background: #a4a4a4;
}
.hover {
    background: #A9D0F5;
}
ul {
    padding: 5px 0;
}
li {
    padding: 6px 3px;
}
.autofill {
    width: 250px;
}
.input {
    width: 250px;
    height: 2.2em;
    padding: .3em .5em;
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="frm">
<input type="text" class="input" name="example" id="example" placeholder="example..." autocomplete="off" list="examplelist" />
    <input type="submit" value="Submit"/>
</form>
<div class="autofill">
    <ul class="autocomplete">
        <li class="autocomplete-list">John Doe (San Jose, CA)</li>
        <li class="autocomplete-list">Jane Doe (San Francisco, CA)</li>
        <li class="autocomplete-list">John Jane (San Carlos, CA)</li>
    </ul>
</div>

Answer 3

<强> LIVE DEMO

我添加了一个计数器变量，如果是counter > 1，那么只有键Up，Down，Enter方法调用，同时再次按Enter键我设置counter=0所以你得到最后选择李。我不是每次都致电removeClass('selected')，而是仅在我的counter >1。

时调用它

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

});

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

3 个答案: