Question

在下面的代码中，我在li标签中使用foreach循环获取值，这些li包含name和id所以我期望的是当它向下显示li项目时箭头向下或向上箭头键按下特定值被选中并显示值＆＃39;一个＆＃39;或者＆＃39; b＆＃39;在文本框中选择值id显示在输入类型隐藏框中再次选择下一个值显示隐藏的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文字涂成红色或绿色，因为我不知道你想要在选择时发生什么。

使用箭头键（向上和向下）使用（jQuery）从ajax响应

1 个答案: