英文:
How to select li dropdown text with keyboard arrow keys (without mouse click)
问题
我想要使用键盘箭头键从下拉列表中选择元素或行。请查看下面的截图：
如果你看到这张图片，在表格中有一列叫 Ledger Name。当我在输入时，下拉框弹出来了，但无法使用键盘箭头键选择它。
这些值来自数据库表，即通过 AJAX 调用 JSP 页面实现的搜索功能。
请在这方面帮助我。
以下是为此编写的 JQUERY 函数代码：
以下是用于 AJAX 调用和从数据库表中设置数据到 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('');
});
英文:
I wanted to select element or row from li dropdown with keyboard arrow keys. Please see the screenshot below:
If you see the image, there is column Ledger Name in table. When I am typing drodown is coming but not able to select it by keyboard arrow keys.
These values are coming from database table i.e. search functionality is implemented through AJAX call to JSP page.
Please help me on this.
Below is the JQUERY function code written for this :
Below is the code for AJAX call & setting data to ul from db table.
It is written in Jquery & AJAX. JSP is used to get data from database
$("#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('');
});
答案1
得分: 1
下午好，
您可以查看datalist元素
这种方式已经内置了功能。
附带一些带有样式的示例
至于如何使用<li>来实现这一点：
- 在输入元素上添加一个
onFocus事件监听器，执行步骤2 - 附加
onKeyDown事件监听器以监听上/下/和回车键 - 然后您可以跟踪一个计数器，知道要突出显示哪个元素，
向下箭头-> +1，向上箭头-1 - 确保
0 < count < options.length，通过循环或夹值，取决于您的用例更合理。 - 按回车键会用所选元素替换输入元素中的值
无论如何，这只是一种实现此功能的方法，希望您会使用datalist，省去很多时间；)
英文:
Good afternoon,
You could take a look at the datalist element
That way the functionality is built in.
PS: here's some good examples with styles
As for how to accomplish this with <li><b>
- have an event listener on you input element for
onFocusthat performs step 2 - attach the
onKeyDowneven listener to listen for up/down/and enter keys - then you can keep track of a counter knowing what element to highlight,
down-arrow -> +1, up-arrow -1 - make sure that
0 < count < options.length, by either cycling or clamping, whichever makes more sense for your usecase. - and pressing enter would replace the value in the input element with the selected element
Anyways, that is just one way to implement this feature, hopefully you'll just use the datalist and save yourself a lot of time 
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论