如何用JavaScript实现无自动补全搜索，校验JSON文件内容是否存在

需求：实现搜索输入框，校验指定JSON数据中是否存在匹配内容，匹配成功弹出alert提示exists，匹配失败弹出alert提示not exists。

HTML 代码 #

<div class="search-bar">
  <input type="text" id="seeker" placeholder="输入要搜索的内容">
</div>
<div id="content"></div>

JavaScript 代码 #

以下代码基于示例逻辑扩展，新增匹配结果校验弹窗功能：

// 模拟JSON数据
var data = [  
   {  
      "id":198,
      "name":"Aaron Garo"
   },
   {  
      "id":345,
      "name":"Michael Stines"
   },
   {  
      "id":545,
      "name":"Ully Heiz"
   },
   {  
      "id":678,
      "name":"Asgaf Torino"
   }
]

// 渲染JSON数据到页面
let output = "";
$.each(data, function(key, val){
    output += "<div class='values'>";
    output += '<h5 class="value-id">' + val.id + '</h5>';
    output += '<p class="value-name">' + val.name + '</p>'
  output += "</div>";
});
$('#content').html(output);

// 正则转义工具函数
if (!RegExp.escape) {
  RegExp.escape = function (s) {
    return s.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&")
  };
}

// 搜索核心逻辑
jQuery(function(){
  const $rows = $('.values');
  // 绑定回车触发搜索校验，避免输入过程中频繁弹窗
  $('#seeker').on('keyup', function (e) {
    // 仅按下回车键时触发校验，删除该行可实现实时校验
    if(e.keyCode !== 13) return;
    
    const searchVal = $.trim(this.value).replace(/\s+/g, ' ');
    // 空内容不触发校验
    if(!searchVal) return;

    const regex =  new RegExp(RegExp.escape(searchVal), 'i');
    const matchRows = $rows.filter(function () {
      const text = $(this).children(".value-name").text().replace(/\s+/g, ' ');
      return regex.test(text);
    });

    // 按匹配结果弹出对应提示
    if(matchRows.length > 0) {
      alert('exists');
      matchRows.show();
      $rows.not(matchRows).hide();
    } else {
      alert('not exists');
    }
  });
});

注：本实现依赖jQuery库，使用前请确保页面已正确引入jQuery。

可调整配置说明 #

• 匹配规则默认是不区分大小写的模糊匹配，修改正则构造的第二个参数i可调整匹配规则
• 目前默认校验name字段，如需校验其他字段，修改filter逻辑中提取的文本字段即可
• 如需修改触发校验的时机，调整事件绑定逻辑即可

内容的提问来源于stack exchange，提问作者abdelkader fattnassi