如何在jQuery中实现输入无匹配时显示‘NO COUNTRY FOUND’提示

你已经搞定了核心的文本匹配功能，现在只需要补个简单的判断逻辑，就能解决无匹配时显示空白的问题。我给你具体的实现思路和代码示例：

核心调整思路 #

在你的匹配逻辑里，先检查过滤后的结果数组长度：如果没有匹配项，就渲染NO COUNTRY FOUND；如果有结果，正常生成列表；如果输入为空，还可以根据需求做对应处理（比如清空列表或显示所有国家）。

具体代码示例 #

假设你的国家数据存在countries数组中，输入框选择器是#search-input，可以这样修改处理函数：

function handleSearchInput() {
  // 获取用户输入并统一转大写，避免大小写匹配偏差
  const userInput = $('#search-input').val().trim().toUpperCase();
  // 过滤出匹配的国家
  const matchedCountries = countries.filter(country => 
    country.toUpperCase().includes(userInput)
  );

  const suggestionsList = $('ul.suggestions');
  
  // 分场景处理渲染逻辑
  if (userInput === '') {
    // 输入为空时：可清空列表，或渲染全部国家，按你的需求调整
    suggestionsList.html('');
  } else if (matchedCountries.length === 0) {
    // 无匹配结果时，显示提示文本
    suggestionsList.html('NO COUNTRY FOUND');
  } else {
    // 有匹配结果时，正常生成列表项
    const listItems = matchedCountries.map(country => `<li>${country}</li>`).join('');
    suggestionsList.html(listItems);
  }
}

// 绑定输入事件，实时响应用户输入
$('#search-input').on('input', handleSearchInput);

为什么之前显示空白？ #

之前的逻辑应该是直接把匹配结果转成列表项，当无匹配时，matchedCountries是空数组，经过map和join后得到空字符串，所以$("ul.suggestions").html('')就会显示空白。现在加了matchedCountries.length === 0的判断分支，就能针对性渲染提示文本了。

额外优化小技巧 #

如果想给提示文本加样式，可以把文本放在带类名的标签里：

suggestionsList.html('<li class="no-match-tip">NO COUNTRY FOUND</li>')

然后通过CSS美化提示的字体颜色、样式等，让提示更醒目。

内容的提问来源于stack exchange，提问作者Geryt Ginting