我想使用 JavaScript 为 JSON 数据创建一个搜索框，并在内容存在与否时弹出一个窗口

Posted 2023-05-08

【中文标题】我想使用 JavaScript 为 JSON 数据创建一个搜索框，并在内容存在与否时弹出一个窗口

【英文标题】：I want to create a search box for JSON data using JavaScript and get a popup if content exists or not

【发布时间】：2021-12-01 00:19:19

【问题描述】：

我有这段代码来搜索我的 JSON 数据，但我 当我搜索时，我会收到一个弹出窗口，说明它是否存在于我的 JSON 文件中。我该如何解决？

我基本上需要一个 html 搜索框来搜索相应的 JSON 数据并在弹出窗口中返回结果：

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">' + 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 regex =  new RegExp(RegExp.escape($.trim(this.value).replace(/\s+/g, ' ')), 'i')
    $rows.hide().filter(function () 
      var text = $(this).children(".value-name").text().replace(/\s+/g, ' ');
      return regex.test(text)
    ).show();
  );
);

.values
  background: #FFFFAA;


.search-bar
  width: 100%;

<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">
</div>
<div id="content"></div>

【问题讨论】：

@mplungjan want 当我搜索时，我收到一个弹出窗口，说明它是否存在于我的 json 文件中。

搜索现在不处理数字。您只想在人们输入数字时弹出一个窗口？

【参考方案1】：

正是你需要的

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 += `<option value="Name : $val.name ; ID : $val.id" />`
);

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

$('#mybtn').click(() => 
  var name = document.getElementById("seeker").value.split(": ")[1].split(" ;")[0];
  if (data.find(o => o.name == name)) 
    alert("value does exist");
   else 
    alert("value does not exist");
  
);

<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" list="names">
  <datalist id="names">
  </datalist>
  <button id="mybtn" role="button">Search</button>
</div>

【讨论】：

嗨，我已经编辑了 sn-p 请检查这是否是您想要的。如果是，请接受我的回答

【参考方案2】：

你的意思可能是这样的：

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


$('#content').html(data.map((id,name) => `<div class='values'><h5 class="value-id">$id</h5><p class="value-name">$name</p></div>`));

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

$(function()
  var $rows = $('.values');
  $('#seeker').keyup(function () 
    var regex =  new RegExp(RegExp.escape($.trim(this.value).replace(/\s+/g, ' ')), 'i')
    $rows.hide().filter(function () 
      var text = $(this).children(".value-name").text().replace(/\s+/g, ' ');
      return regex.test(text)
    ).show();
    const count = $(":visible",$rows).length;
    $("#res").text(count/2 +" found").toggle(count > 0)
  );
);

.values
  background: #FFFFAA;


.search-bar
  width: 100%;

#res  display: none

<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"> <span id="res"></span>
</div>
<div id="content"></div>

【讨论】：

点击搜索时会弹出提示内容是否存在 就像我创建 Aaron Garo 然后点击搜索显示弹出此名称存在或此名称不存在

请画一些图。我不明白

我添加了图片谢谢