增加 select 元素中的搜索时间 HTML

Question

你们中的任何人都知道是否有一种方法可以在用户尝试 select select 列表中的元素时开始搜索之前增加时间 通过在 HTML.

中键入元素的名称

例如：我有一个包含 100 个元素的列表，用户想要找到元素 "Adam Smith" 但是他的速度很慢而且他不能很快地输入 select元素亚当·斯密。你知道在这个用例中是否有办法帮助用户。

我可以在 HTML 中使用不同的组件而不是正常的 select，但我使用的是遗留系统，我不能过多地更改源代码。无论如何，JS 解决方案也被广泛接受

Answer 1

要调试并查找用户开始输入时调用了哪些函数，您可以在添加（或覆盖）原始行为的 HTML 输出的最后添加一些 JavaScript。

这可能有助于追踪问题并找出定时器值的设置位置：

document.getElementById('thatInputElement').onKeyUp = function(event)
{
    console.log(event);
};

您也可以直接从浏览器中的开发工具 Web 控制台实现这一点，而无需篡改源代码。

Answer 2

我认为 Lodash 的 去抖动 方法是一个完美的用例。

这里有一个小例子，其中函数等待触发的时间是 500:

function doSearch () {
  $('#output').html('searched: ' + $('#search').val())
}

$('#search').on('input', _.debounce(doSearch, 500));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type=text id=search />
<p id=output></p>

function doSearch () {
  console.log('do search')
}

$('#search').on('input', _.debounce(doSearch, 500));

增加 select 元素中的搜索时间 HTML

Increase time for search in a select element HTML

html

javascript

user-experience