Javascript 自动完成不会清除没有输入的建议

Question

我观看了有关如何使用 JSON 文件和 Fetch 将 Javascript 与自动完成结合使用的教程。一切正常；以下情况除外：

如果我清除输入，它会显示文件中的所有结果。我在代码中包含了一条注释，我试图清除结果但它不起作用。

JSFiddle 上的示例不起作用，因为我无法添加任何资产。这是当输入框中没有字符时应该清除数据的代码：

if (matches.length === 0) {
matchList.innerHTML = ''; // Line 31: This doesn't clear the results when no input is entered.

}

但是在 CSS 字段中，我硬编码了一些 JSON 文件供您参考。

提前致谢，马特

Answer 1

使用 onChange() 可以检查输入标签中关键字的最终长度，对于 NULL 可以忽略该建议。

Answer 2

我研究了代码并对其进行了研究。我不得不将代码分成两个事件。缺少的是加载 DOM 时，然后获取状态列表。这是修改后的代码：

const search = document.getElementById('search');
const matchList = document.getElementById('match-list');
let states;

// Get states
const getStates = async () => {
  const res = await fetch('states.json');
  states = await res.json();
};

// FIlter states
const searchStates = (searchText) => {
  // Get matches to current text input
  let matches = states.filter((state) => {
    const regex = new RegExp(`^${searchText}`, 'gi');
    return state.name.match(regex) || state.abbr.match(regex);
  });

  // Clear when input or matches are empty
  if (searchText.length === 0) {
    matches = [];
    matchList.innerHTML = '';
  }

  outputHtml(matches);
};

// Show results in HTML
const outputHtml = (matches) => {
  if (matches.length > 0) {
    const html = matches
      .map(
        (matt) => `<div class="card card-body mb-1">
    <h4>${matt.name} (${matt.abbr}) 
    <span class="text-primary">${matt.capital}</span></h4>
    <small>Lat: ${matt.lat} / Long: ${matt.long}</small>
   </div>`
      )
      .join('');
    matchList.innerHTML = html;
  }
};

window.addEventListener('DOMContentLoaded', getStates);
search.addEventListener('input', () => searchStates(search.value));

Javascript 自动完成不会清除没有输入的建议

Javascript Autocomplete doesn't clear suggestion with no input

javascript

json

autocomplete