增加在选择元素HTML中搜索的时间

Increase time for search in a select element HTML

本文关键字：搜索 时间 HTML 选择 元素 增加      更新时间：2024-04-13

你们中的任何人都知道，当用户试图从选择列表中选择一个元素时，是否有办法增加在此之前的搜索时间，方法是在HTML中键入元素的名称。

  • 例如：我有一个100个元素的列表，用户想找到元素"Adam Smith"，但他速度很慢，无法快速键入以选择元素Adam Smith。你知道在这个用例中是否有一种方法可以帮助用户吗

我可以使用不同的组件，而不是HTML中的普通select，但我使用的是遗留系统，我不能过多地更改源代码。无论如何，JS解决方案也是公认的

我认为这是一个完美的用例，用于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));

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

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

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

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

相关文章：