有没有办法显示与用户输入不匹配的数据列表选项？答案

【问题标题】：Is there a way to show datalist options that don't match user input?有没有办法显示与用户输入不匹配的数据列表选项？
【发布时间】：2016-09-13 19:34:04
【问题描述】：

我有两个元素，一个datalist 和一个input：

<datalist id="choices"></datalist>

<input id="custom_id" name="custom_name" type="text" value="" list="choices" class="medium-field"/>

此外，这是一个 AJAX 请求，它填充数据列表（这有效；不是我的问题）

var params = {
    "partial": $("#custom_id").value;
};
$.ajax({
      cache: true,
      url: "http://www.example.com",
      type: "POST",
      data: JSON.stringify(params),  // contains the input.value
      contentType: "application/json",
      headers: {
        "Range": "0-9"
      },
      dataType: "json",
      processData: false,
      // On success, create <option> elements and append them to datalist
      success: function(data) { .. };

REST 端点返回的数据格式如下：

[
  { 
    "label": "active",
    "name": "iron"
  }, 
  ..
]

基本上，AJAX 请求会在 PostgreSQL 数据库前面命中一个 REST 端点，该数据库确实根据提供的 partial 参数运行 SELECT，并返回一个 2 列表（其格式为上述响应)。

但是，我遇到了从AJAX 请求返回的数据与用户输入的拼写不同的情况；例如，当input.value = 'magnet' 时，我有时会返回一个选项列表，其中一些可能会显示为'iron'。

问题：由于'iron' 与'magnet' 的拼写不同，用户不会在数据列表下拉列表中看到此选项（即使创建了选项元素），除非用户实际上是类型 'iron'。有没有办法让我在数据列表中显示'iron'，即使它与用户输入的内容不匹配？

【问题讨论】：

我不禁认为这个问题缺少一些东西 - 您可以向我们提供您在 AJAX 请求中遇到的查询，这是用户键入时返回的数据有效负载的示例iron 或 magnet
@Alex 我已经更新了问题
您说即使创建了该选项也没有显示该选项-您如何在服务器/客户端上过滤此数据。这里仍然没有足够的信息
听起来不像使用<datalist> 是适合这项工作的工具，因为您必须依靠浏览器进行匹配

标签： javascript jquery

【解决方案1】：

据我了解您的问题，您愿意在搜索框中输入输入时显示同义词，即如果用户输入magnet，他将看到“磁铁”的同义词, 在这种情况下恰好是 iron 您可以做的是将 ajax 命中发送到 example.com 我知道有一些 SQL 代码为SELECT keyword FROM table_name WHERE keyword LIKE '%<whatever string is in data>%'。即使用户键入 mag，这也会返回 'magnet'。现在当用户输入“mag”时返回“iron”和“magnet” 您将不得不稍微修改该表，如下所示： 1. 创建一个包含列的关键字表：id、keyword 和 synonym_to_keyword 2.输入数据如 (1, 'iron' , null) (2,'magnet',1)

现在将查询修改为：SELECT id as I, keyword FROM table_name WHERE keyword like '%<whatever string is in data>%' OR keyword like (SELECT keyword FROM table_name WHERE synonym_to_keyword = I)

请注意，您必须维护关键字列表和关键字的可能同义词，以便用户在键入“磁铁”时看到所有可能的选项（如磁铁、铁等）。

【讨论】：

【解决方案2】：

由于 Chrome 会比较值和标签以查看它是否应该显示 datalist 选项，因此您可以将所有选项标签设置为输入中的值以显示它们。

Relevant Chromium patch

下面的代码示例：

function autoSuggestAddress(input) {
  if (input.value) {
    // dummy data
    let suggestions = ["Example 1", "Example 2", "Example 3"];
    // clear old datalist
    let datalist = input.list;
    while (datalist.hasChildNodes()) {
      datalist.removeChild(datalist.firstChild);
    }

    suggestions.forEach((item) => {
      let option = document.createElement("option");
      option.label = input.value;
      option.value = item;
      datalist.appendChild(option);
    });
  }
}

<form method="GET" id="search-form">
  <label for="address">Address</label>
  <input type="text" id="address" name="address" form="search-form" oninput="autoSuggestAddress(this)" type="search" value="" required autocomplete="off" list="suggestions" />
  <datalist id="suggestions">
  </datalist>
</form>

【讨论】：