Question

我有两个元素，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端点命中，该数据库根据提供的SELECT参数运行partial，并返回一个2列表（其中被格式化为上述响应）。

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

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

Answer 1

就我能理解你的问题而言，你愿意在搜索框中输入输入时显示同义词，即如果用户键入magnet，他将看到同义词为＆＃39; magnet＆＃39;，在这种情况下恰好是iron 你可以做的是当ajax命中发送到example.com时，我知道有一些SQL代码为SELECT keyword FROM table_name WHERE keyword LIKE '%<whatever string is in data>%'。这会让磁铁回归“磁铁”。即使用户键入mag。现在回来＆＃39;铁＆＃39;和磁铁＆＃39;当用户输入'mag＆＃39; 您将不得不稍微修改表，如下所示： 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)

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

Answer 2

由于Chrome浏览器会同时比较值和标签以查看是否应显示数据列表选项，因此您可以将所有选项标签设置为输入中的值，以使其显示。

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>

有没有办法显示与用户输入不匹配的datalist选项？

2 个答案: