在 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”或“一个”），该列表就会出现

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 中存在一个错误，需要将自动完成设置为关闭才能使 datalist 正常工作。也许这会有所帮助？