如何实现可弹窗提示内容存在性的JavaScript JSON数据搜索框

核心改动说明 #

• 在原有搜索筛选逻辑后新增匹配结果统计判断，仅当输入非空时触发弹窗提示
• 保留原有列表筛选展示功能，新增弹窗不影响原有交互逻辑
• 匹配结果区分两种提示：存在对应内容时告知匹配条数，不存在时直接告知无匹配

完整HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-bar">
  <input type="text" id="seeker" placeholder="请输入姓名搜索">
</div>
<div id="content"></div>

CSS代码 #

.values{
  background: #FFFFAA;
  margin: 10px 0;
  padding: 8px;
}

.search-bar{
  width: 100%;
  margin-bottom: 15px;
}
#seeker{
  padding: 6px;
  width: 300px;
}

修改后的JS代码 #

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

output = "";
$.each(data, function(key, val){
    output += "<div class='values'>";
      output += '<h5 class="value-id">ID：' + val.id + '</h5>';
      output += '<p class="value-name">姓名：' + val.name + '</p>'
  output += "</div>";
});

$('#content').html(output);

/* SEEKER FUNCTION */
 if (!RegExp.escape) {
   RegExp.escape = function (s) {
     return s.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&")
   };
 }

jQuery(function(){
  var $rows = $('.values');
  $('#seeker').keyup(function () {
    var searchVal = $.trim(this.value).replace(/\s+/g, ' ');
    // 输入为空时重置展示不弹提示
    if(searchVal === ''){
      $rows.show();
      return;
    }
    var regex =  new RegExp(RegExp.escape(searchVal), 'i');
    var matchRows = $rows.hide().filter(function () {
      var text = $(this).children(".value-name").text().replace(/\s+/g, ' ');
      return regex.test(text)
    });
    matchRows.show();
    // 弹窗提示匹配结果
    if(matchRows.length > 0){
      alert(`搜索内容存在，共找到${matchRows.length}条匹配结果`);
    }else{
      alert('搜索内容不存在于当前数据中');
    }
  });
});

可选优化（避免频繁弹窗） #

如果不希望每输入一个字符就触发弹窗，可以将触发事件从keyup改为change，只有当输入框失焦或者按下回车时才会触发搜索和提示，仅需修改一行代码：将$('#seeker').keyup(function () {替换为$('#seeker').change(function () {即可。

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