javascript 如何使用键盘箭头键选择li下拉文本(无需单击鼠标)

wvmv3b1j  于 2023-03-11  发布在  Java
关注(0)|答案(1)|浏览(140)

我想用键盘箭头键从li下拉菜单中选择元素或行。请参见下面的屏幕截图:
enter image description here
如果你看到的图像,有列分类帐名称在表中。当我键入drodown是来,但不能选择它的键盘箭头键。
这些值来自数据库表,即通过 AJAX 调用JSP页面实现搜索功能。
请帮我一下。
下面是为此编写的JQUERY函数代码:下面是 AJAX 调用的代码&将数据从db表设置为ul。
该系统采用Jquery和 AJAX 语言编写,利用JSP技术从数据库中获取数据

$("#tbody").on("keyup", "input[name^=inputString]", function() {
  var $this = $(this);
  $("tbody tr").each(function() {
    var search = $(this).closest('tr').find("input").val();   
    if (search != '' && search != null) {
      $.ajax({
                  type: 'POST',
                  url: 'ledgers.jsp',
                  data: 'key=' + search,
                  success: function(data) {
                    $this.next('#showList').html(data);
                  }
      });
    } else {
              $('#showList').html('');
           }
    });
   });
      
   $("#tbody").on('click', 'li', function() {
     $(this).closest('tr').find("input").val($(this).text());
     $(this).closest('tr').find('#showList').html('');
   });
dgsult0t

dgsult0t1#

下午好,
您可以查看一下datalist element
这样就内置了功能。
PS:这里有一些关于styles的好例子
至于如何使用<li>来实现这一点
1.在onFocus的输入元素上有一个事件侦听器,用于执行步骤2
1.附加onKeyDown事件监听器来监听up/down/和enter键
1.那么你就可以跟踪一个计数器,它知道要突出显示哪个元素,down-arrow -> +1, up-arrow -1
1.确保0 < count < options.length,通过循环或箝位,无论哪种对您的使用情况更有意义。
1.按Enter键将用选定元素替换input元素中的值
无论如何,这只是实现这个特性的一种方法,希望您只使用datalist并保存大量时间;)

相关问题