如何使用javascript创建不自动完成的搜索来检查json文件中是不是存在内容

Posted 2023-05-08

【中文标题】如何使用javascript创建不自动完成的搜索来检查json文件中是不是存在内容

【英文标题】：How to create search not autocomplète using javascript to check if content exists or not in json file如何使用javascript创建不自动完成的搜索来检查json文件中是否存在内容

【发布时间】：2021-12-01 05:45:12

【问题描述】：

我需要帮助编写搜索输入以检查 json 文件中是否存在内容。

如果存在，显示一个弹出“警报”，显示“存在”或弹出“警报”，显示不存在。

例子

HTML

<div class="search-bar">
  <input type="text" id="seeker">
</div>
<div id="content"></div>

JavaScript

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();
  );
);

JS Fiddle：https://jsfiddle.net/abdelkaderft/o6kwrcjx/1/

【问题讨论】：

哪个json对象？ html在哪里？

jsfiddle.net/abdelkaderft/o6kwrcjx/1 @navnath

【参考方案1】：

考虑以下示例：https://jsfiddle.net/Twisty/ocbs9e8a/

JavaScript

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

  $.each(data, function(key, val) 
    var row = $("<div>", 
      class: "values"
    ).appendTo($('#content'));
    $("<h5>", 
      class: "value-id"
    ).html(val.id).appendTo(row);
    $("<p>", 
      class: "value-name"
    ).html(val.name).appendTo(row);
  );

  var $rows = $('.values');
  $('#seeker').keyup(function() 
    var term = $(this).val();
    // Showe all Rowa
    $rows.show();
    // Iterate each row
    $rows.each(function(i, el) 
      // Hide those that do not contain Term
      if ($(".value-id", el).text().indexOf(term) == -1) 
        $(el).hide();
      
    )
  );
);

这只是过滤显示项目的一种方法。例如，如果用户输入4，则只显示两个结果。