javascript - Firefox 中输入数据列表的延迟加载

Question

我想为用户名创建一个输入字段，应该可以从大量名称/用户名中进行选择。应该可以输入名称或用户名中包含的部分字符串。我不想最初加载列表，而是在用户输入最少数量的字符(例如 3 个)之后加载，因为列表最终非常大，应该减少到最初 3 个字符的子集。

如果在 Chrome 或 Chromium 中将 <input> 与 <datalist> 一起使用，则效果非常好，但在 Firefox 中则无法按预期工作。我还没有测试过其他浏览器。

预期的行为(以及它在 Chromium 中的工作方式)是我键入字符，在第三个字符之后，将加载并自动显示下拉自动建议列表。如果我继续输入，列表将继续被过滤。此外，我可以通过转义使列表消失，并通过向下箭头或向上箭头重新出现。

在 Firefox 中，该列表不会自动显示。我必须输入另一个字符，然后退格。另外，我无法使其显示为向下箭头或向上箭头。 (尽管该解决方案在 Firefox 中确实有效，如果列表是最初创建的并且不是延迟加载的，但这不是如上所述的选项)。

我想找到一种使建议列表自动打开(或按键时)或以不同方式解决此问题的方法(无需 datalist )。

要求

• 尽可能少地使用外部库。我目前使用jquery，如果是jquery解决方案就可以，但纯JavaScript会更好。
• 在所有浏览器中自动显示建议列表下拉菜单(加载列表后)将是理想的选择。但至少可以通过按键或按钮下拉列表。

示例

初始填充的数据列表

• 这也适用于 Firefox。
• 只要您键入列表中包含的字符之一(例如“1”、“o”、“12”等)，该列表就会立即出现

<input class="my-input-class" placeholder="Enter '123' ... or 'one' ... " list="myDatalist" size="100">
<datalist id="myDatalist">
  <option value="1">one</option>
  <option value="12">one two</option>
  <option value="123">one two three</option>
  <option value="1234">one two three four</option>
  <option value="12345">one two three four five</option>
  <option value="123456">one two three four five six</option>
</datalist>

惰性填充数据列表

• 不适用于 Firefox
• 只要您输入列表中包含的至少三个字符(例如“123”或“one”)，该列表就会立即显示

var previous = null;

function delayedCallback(callback, ms) {
  var timer = 0;

  return function() {
    var context = this,
      args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function() {
      callback.apply(context, args);
    }, ms || 0);
  };
}

function generateSelectList(inputElement) {
  var value = inputElement.val();

  var optionList = {
    '123': 'one two three',
    '1234': 'one two three four',
    '12345': 'one two three four five',
    '123456': 'one two three four five six',
    '1234567': 'one two three four five six seven',
  }

  $('#myDatalist').remove();

  dl = document.createElement('datalist');
  inputElement.attr('list', 'myDatalist');
  dl.id = 'myDatalist';

  for (var key in optionList) {
    var option = document.createElement('option');
    option.value = key;
    option.append(optionList[key]);
    dl.append(option);
  }
  inputElement.append(dl);
}

$(document).on('input', '.my-input-class', delayedCallback(function(event) {
  var inputElement = $(event.target);
  var value = inputElement.val();

  // only get result list if
  // - minimum 3 chars
  // - same result list has not already been fetched (if string starts with previous string)
  if (value.length >= 3) {
    if (previous && value.startsWith(previous) && $('#myDatalist').length) {
      console.log("DO NOT fetch list (again) value=" + value + " previous=" + previous);
    } else {
      console.log("fetch list: value=" + value);
      generateSelectList(inputElement);
      previous = value;
    }
  }

}, 500));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="my-input-class" placeholder="Enter '123' ... or 'one' ... (at least 3 characters)" list="myDatalist" size="100">

<小时/>

我搜索了一些解决方案或者其他人是否有同样的问题。我确实发现了一些关于 datalist 无法按预期工作或在不同浏览器中无法正常工作的提示，以及使用一些 jquery 库的建议。虽然我可以只使用建议的解决方案之一，但我不确定它们是否能解决我的问题，或者是否有办法使其与 datalist 和其他浏览器(Chrome 除外)一起工作。

Answer 1

根据canIuse Firefox 中存在一个错误，需要将自动完成功能设置为关闭，数据列表才能正常工作。也许这会有帮助？