JavaScript AutoComplete不明确建议，没有输入

发布于 2025-01-28 05:40:01 字数 698 浏览 3 评论 0原文

我观看了一个有关如何使用JSON文件和获取的JavaScript与AutoComplete一起使用的教程。一切正常；除了以下内容：

如果我清除输入，则显示文件中的所有结果。我在代码中包括了一个评论，我试图清除结果，但它不起作用。

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

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

}

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

提前致谢， matt

原文

I watched a tutorial on how to use Javascript with Autocomplete using a JSON file and Fetch. Everything works fine; except for the following:

If I clear the input, it shows all of the results in the file. I have included a comment in the code where I try to clear the results but it doesn't work.

The example on JSFiddle doesn't work because I can't add any assets.
Here is the code that should be clearing the data when no characters are in the input box:

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

}

But in the CSS field, I have hard coded some of the JSON file for your reference.

Thanks in advance,
Matt

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

萌能量女王 2025-02-04 05:40:01

使用OnChange（）您可以检查输入标签中编写的关键字的最终长度，对于NULL，您可以忽略该建议。

回复收藏 0 原文

夏有森光若流苏 2025-02-04 05:40:01

我玩了代码并进行了研究。我必须将代码分为两个事件。缺少的是加载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));

I played around with the code and researched it. I had to separate the code into two events. The one that was missing was when the DOM is loaded, then grab a list of states. Here is the revised code:

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));

回复收藏 0 原文

~没有更多了~