HTML/JS实现搜索框搜索次数限制 附现有题库搜索代码

你现有搜索逻辑已经可以正常匹配关键词，只需要补充计数校验、次数持久化、超限拦截三个模块的逻辑就能实现需求，改动后的完整可运行代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DrNapester ALShemmari</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
#myInput {
  width: 100%;
  font-size: 16px;
  padding: 12px 20px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}
#searchTip {
  color: #d93025;
  font-size: 14px;
  margin-bottom: 12px;
  min-height: 20px;
}
#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #0a2351;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: white;
  display: block
}
#myUL li a:hover:not(.header) {
  background-color: #eee;
  color: #0a2351;
}
</style>
</head>
<body>
<h2>DrNapester - TestBank System</h2>
<div id="searchTip"></div>
<input type="text" id="myInput" placeholder="输入要查询的题目关键词 :)" title="Type in a name">
<ul id="myUL" style="display: none;">
  <li style="display: none;"><a href="Napester.html#">Question1 - (((Answer1)))</a></li>
  <li style="display: none;"><a href="Napester.html#">Question2 - (((Answer2)))</a></li>
  <li style="display: none;"><a href="Napester.html#">Question3 - (((Answer3)))</a></li>
  <li style="display: none;"><a href="Napester.html#">Question4 - (((Answer4)))</a></li>
  <li style="display: none;"><a href="Napester.html#">Question5 - (((Answer5)))</a></li>
  <!-- 剩余95道题按上述li标签格式直接往下追加即可，无需修改JS逻辑 -->
</ul>

<script>
// 配置最大搜索次数
const MAX_SEARCH_TIMES = 10;
const STORAGE_KEY = 'search_remaining_count';
const UL = document.getElementById("myUL");
const searchBox = document.getElementById("myInput");
const tipDom = document.getElementById("searchTip");
let lastSearchKey = '';

// 初始化剩余搜索次数
let remainingCount = Number(localStorage.getItem(STORAGE_KEY));
if (isNaN(remainingCount)) {
  remainingCount = MAX_SEARCH_TIMES;
  localStorage.setItem(STORAGE_KEY, remainingCount);
}
updateStatusTip();

// 失焦自动隐藏结果列表
searchBox.addEventListener("blur", function(){
  UL.style.display = "none";
});

// 输入内容实时触发搜索
searchBox.addEventListener("input", searchFunction);

function updateStatusTip() {
  if (remainingCount <= 0) {
    tipDom.textContent = '搜索次数已耗尽，您最多可查询10道题目';
    searchBox.disabled = true;
    searchBox.placeholder = '搜索次数已用完';
    return;
  }
  tipDom.textContent = `剩余可搜索次数：${remainingCount}`;
}

function searchFunction() {
  let input, filter, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.trim().toUpperCase();
  
  // 输入为空时隐藏列表，不扣次数
  if(filter.length < 1) {
    UL.style.display = "none";
    lastSearchKey = '';
    return false;
  }

  // 次数耗尽直接拦截搜索请求
  if (remainingCount <= 0) {
    UL.style.display = "none";
    return false;
  }

  UL.style.display = "block";
  li = UL.getElementsByTagName("li");
  let hasMatchedResult = false;

  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 
      li[i].style.display = "";
      hasMatchedResult = true;
    } else {
      li[i].style.display = "none";
    }
  }

  // 仅当输入新的有效搜索关键词时扣次数，避免输入过程中连续按键重复扣次
  if (hasMatchedResult && filter !== lastSearchKey) {
    remainingCount--;
    localStorage.setItem(STORAGE_KEY, remainingCount);
    lastSearchKey = filter;
    updateStatusTip();
  }
}
</script>
</body>
</html>

核心逻辑说明 #

• 次数持久化：用localStorage存储剩余搜索次数，用户关闭页面重开也不会重置计数，如果需要按单次访问会话限制，可以换成sessionStorage存储
• 防误扣逻辑：记录上一次已扣次数的搜索关键词，用户修改搜索词过程中不会每按一次按键就扣一次次数，只有触发新的有效搜索才计数
• 超限处理：次数用完后直接禁用输入框，展示明确提示，不再返回任何搜索结果
• 题库扩展：直接在<ul id="myUL">标签内按现有li的格式追加剩下的95道题目即可，不需要调整JS代码

测试时如果需要重置计数，可以打开浏览器控制台执行localStorage.removeItem('search_remaining_count')后刷新页面即可。

内容的提问来源于stack exchange，提问作者Dr.Jaber ALShemmari