Javascript 尝试更改此JSON搜索,使其仅在按下提交按钮时进行搜索

Javascript 尝试更改此JSON搜索,使其仅在按下提交按钮时进行搜索,javascript,jquery,json,Javascript,Jquery,Json,这里是新手,也是代码初学者。我有这个代码,我用它来搜索卡拉OK。然而,JSON包含大约40000行信息,搜索设置为在keyup上跳跳虎,因此有时非常滞后。我希望有人能帮我修改这个代码,这样它只会在按下提交按钮时进行搜索。。。有什么想法吗?非常感谢 $(window).load(function(){ $('#search').keyup(function(){ var searchField = $('#search').val(); var regex = ne

这里是新手,也是代码初学者。我有这个代码,我用它来搜索卡拉OK。然而,JSON包含大约40000行信息,搜索设置为在keyup上跳跳虎,因此有时非常滞后。我希望有人能帮我修改这个代码,这样它只会在按下提交按钮时进行搜索。。。有什么想法吗?非常感谢

$(window).load(function(){
$('#search').keyup(function(){
        var searchField = $('#search').val();
        var regex = new RegExp(searchField, "i");
        var output = '<div class="row">';
        var count = 1;
        $.getJSON('data.json', function(data) {
          $.each(data, function(key, val){
            if ((val.name.search(regex) != -1) ||     (val.location.search(regex) != -1)) {
              //output += '<div class="col-md-6 well">';

              //output += '<div class="col-md-7">';
              output += '' + val.name + ' - ';
              output += '' + val.location + '';
              output += '</div>';
              output += '</div>';
              output += '<div class="col-md-7"><a href="request.php?artist='+val.name+'&song='+val.location+'"><img class="img-responsive" src="send.png" /></a></div>';
              if(count%2 == 0){
                output += '</div><div class="row">'
              }
              count++;
            }
          });
          output += '</div>';
          $('#results').html(output);
        }); 
    });
  });
$(窗口).load(函数(){
$(“#搜索”).keyup(函数(){
var searchField=$('#search').val();
var regex=新的RegExp(搜索字段,“i”);
var输出=“”;
var计数=1;
$.getJSON('data.json',函数(数据){
$。每个(数据、函数(键、值){
if((val.name.search(regex)!=-1)| |(val.location.search(regex)!=-1)){
//输出+='';
//输出+='';
输出+=''+val.name+'-';
输出+=''+val.location+'';
输出+='';
输出+='';
输出+='';
如果(计数%2==0){
输出+=''
}
计数++;
}
});
输出+='';
$('#results').html(输出);
}); 
});
});

搜索逻辑不应在客户端实现。对浏览器来说,进行这种迭代是痛苦的。在后端传输搜索逻辑。:)

如果要在前端修复此问题,请在键控期间添加超时/去抖动

var delay = null;

$( el ).keyup( function () { 

     if ( delay ) clearTimeout( delay );

      var delay = setTimeout( function () { 

          // your search logic

      } );
 } );

假设您将提交按钮放在表单中,请为表单提供一个ID

<form id="search-form">


阅读文档:无论你做什么,都需要限制结果。我同意,对于任何人来说,一次获得的结果都太多,无法消化,也无法提高绩效。。问题是,当你打字的时候,它会在你打字的时候找到东西。我希望在你完成打字(并按下按钮或回车键)后只显示结果,以此来加快速度。我想人们低估了我的初学者程度,哈哈。我一点也不知道如何做后台工作
$('#search').keyup(function(){
$('#search-form').on('submit', function (e) {
     e.preventDefault();