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

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 端点，该数据库会根据提供的 partial 参数运行 SELECT，并返回一个 2 列表(其格式如上述响应)。

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

问题:由于 'iron' 的拼写与 'magnet' 不同，用户不会在datalist 下拉列表(即使创建了选项元素)，除非用户实际键入 'iron'。有没有办法让我在数据列表中显示'iron'，即使它与用户输入的内容不匹配？

Answer 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_keyword2. 输入数据，例如 (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)

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