Select 带有箭头键（向上和向下）的 li 元素使用 ajax 响应中 li 标签的 (jQuery)

Question

在下面的代码中，我在 li 标签中使用 foreach 循环获取值，这些 li 包含名称和 ID，所以我期望的是，当向下箭头或向上箭头键按下特定值时，它会一个接一个地显示 li 项目 selected 并在文本框中显示值 'a' 或 'b'，该 select 值 id 再次显示在输入类型隐藏框中 select 下一个值显示隐藏的 id 和值出现在文本框中。这是我的代码。

 output:
    <start output here>
        <li  class="optn_list"  data-id='  1 ' data-uname=' a '>value a</li>
        <li  class="optn_list"  data-id='  2 ' data-uname=' b '>value b</li>
        <li  class="optn_list"  data-id=' 3' data-uname='c '>value c</li>

    <end of output>

        <input type="text" name="usr_name" id="search_user_name" value=""    />
        <input type="hidden"  id="hidden_id" value=""    />


            function get_user_name() {
                            var name = 'xyz';
                            $.ajax({
                                url: "<?= base_url('controller/method') ?>",
                                type: "POST",
                                data: {
                                    name: name,
                                },
                                success: function (response) {

                                    $(".user_res").html('<div id="getTagField"><ul>' + response + '</ul></div>');

$('input').keydown(function(e)
{
 if ( key !== 40 && key !== 38 ) return;
else{

//here how to write condition to select one by one list item using arrow up or down key with focus on selected item

}
)};


                                }

                            });

                        }

Answer 1

如果我没有理解错的话，如果您将这段代码添加到您的 ajax 调用中，它应该可以解决问题。

从现在开始，您可以对这些元素做您需要做的事情。

$(window).on('keydown', function(){
    switch(event.keyCode)
    {
        case 40:
            if($("li[active]").length == 0) 
                $("li:first()")
                .attr('active','1')
                .css('color','red');
            else
                $("li[active]")
                .removeAttr('active')
                .css('color','green')
                .next()
                .attr('active','1')
                .css('color','red');

            break;
        case 38:
            if($("li[active]").length == 0) 
                $("li:last()")
                .attr('active','1')
                .css('color','red');
            else
                $("li[active]")
                .removeAttr('active')
                .css('color','green')
                .prev()
                .attr('active','1')
                .css('color','red');

            break;
    }
    $("#hidden_id").get(0).value = $("li[active]").data('id');
});

发现有一种现代方法可以做到这一点，所以开始吧。

$(window).on('keydown', function(e){
    switch(e.key)
    {
        case 'ArrowDown':
            if($("li[active]").length == 0) 
                $("li:first()")
                .attr('active','1')
                .css('color','red');
            else
                $("li[active]")
                .removeAttr('active')
                .css('color','green')
                .next()
                .attr('active','1')
                .css('color','red');

            break;
        case 'ArrowUp':
            if($("li[active]").length == 0) 
                $("li:last()")
                .attr('active','1')
                .css('color','red');
            else
                $("li[active]")
                .removeAttr('active')
                .css('color','green')
                .prev()
                .attr('active','1')
                .css('color','red');

            break;
    }
    $("#hidden_id").get(0).value = $("li[active]").data('id');
});

您可以使用变量分解该命令链，我没有这样做，因为我不知道您将如何处理这些元素，但从这里开始适应起来相当容易。

我把 LI 的文字涂成红色或绿色，因为我不知道你选择后想要发生什么。

Select 带有箭头键（向上和向下）的 li 元素使用 ajax 响应中 li 标签的 (jQuery)

Select li element with arrow keys (up and down) using (jQuery) from li tag in ajax response

jquery

jquery-ui-autocomplete