如何显示所有返回的结果，但每次请求时都清除状态？

Question

我的服务器回调已经预先过滤了数据，我希望 Tom Select 显示给定查询返回的所有结果。我尝试通过设置

searchField: []

来实现此目的。但是，这也会保留之前输入的查询的结果。

示例：

1. 不好：缺少结果：

• 用户搜索“苏黎世”或“圣加仑”
• 服务器返回“Zürich”或“St. Gallen”，但 Tom Select 会丢弃这些结果，因为它们与键入的字符串不匹配。
• 结论：我希望 Tom Select 显示所有返回的结果。

2. 坏：旧结果：

• 用户搜索“苏黎世”，然后搜索“圣加仑”（缓慢输入并用退格键删除之前的搜索）
• 结果包含 Zur、Zuric、Zurich、St、St Ga、St Gallen
• 结论：我希望 Tom Select 只显示服务器最近查询的结果

3. 好：我需要什么：

• 用户搜索“苏黎世”，然后搜索“圣加仑”（缓慢输入并用退格键删除之前的搜索）
• 用户输入完“Zurich”后，就会显示结果“Zürich”。
• 当用户删除“Zurich”并完成输入“St Gallen”时，将显示结果“St. Gallen”。

哪种选项组合允许我导致这种行为？

这是一个最小的可重现示例：

function search(q, callback) {
  if (q === "Zürich" || q === "Zuerich") {
    callback([{
        'text': 'Zürich',
        'value': 1
      },
      {
        'text': 'Zuerich',
        'value': 2
      }
    ]);
  } else if (q === "St. Gallen" || q === "St Gallen") {
    callback([{
        'text': 'St. Gallen',
        'value': 3
      },
      {
        'text': 'St Gallen',
        'value': 4
      }
    ]);
  } else {
    callback();
  }
}

var settings = {
  load: (q, callback) => this.search(q, callback),
  searchField: []
};
new TomSelect('#tom-select-it', settings);

<meta charset="UTF-8">
<input id="tom-select-it" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.complete.min.js"></script>

Answer 1

这并非小事。

我尝试了DOCS

我添加了变音符号以及退格键的键盘处理程序

let inputElement;
const handleKeyUp = (event) => {
  const query = inputElement.value.trim();
  // Clear options for each keyup to refresh results
  if (query === "") {
    // If the input is empty, close the dropdown
    tS.close();
    tS.load(query, callback => callback([])); // Pass an empty result set
  }
};
const normalizeText = (text) => text.normalize("NFD").replace(/[\u0300-\u036f]/g, "");

const search = (q, callback) => {
  q = normalizeText(q); // Normalize query input
  console.log('?', q)
  // Filter results by normalized text
  const filteredResults = results.filter(item =>
    normalizeText(item.text).includes(q)
  );

  callback(filteredResults);
}

const settings = {
  diacritics: true,
  loadThrottle: 300,
  type: () => console.log("q", q),
  load: function(q, callback) {
    inputElement = document.getElementById('tom-select-it-ts-control'); // add a keyup event handler for backspace
    inputElement.addEventListener('keyup', handleKeyUp);
    if (q.trim() === "") {     // Check if the query is empty
      this.clearOptions(); // Clear options
      this.refreshItems(); 
      callback([]); // Stop further processing
      return;
    }
    search(q, callback); // Call the search function with query if input is not empty
  },
  searchField: ['text']
};

let tS = new TomSelect('#tom-select-it', settings);

<meta charset="UTF-8">
<input id="tom-select-it" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.complete.min.js"></script>
<script>
  const results = [{
      'text': 'Zürich',
      'value': 1
    },
    {
      'text': 'Zuerich',
      'value': 2
    },
    {
      'text': 'St. Gallen',
      'value': 3
    },
    {
      'text': 'St Gallen',
      'value': 4
    }
  ];
</script>