Question

这里的新手和代码的初学者。我有这个代码我用作卡拉OK搜索。但是，JSON包含大约40 000行信息，并且搜索设置为在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);
        }); 
    });
  });

Answer 1

不应在客户端实现搜索逻辑。浏览器进行这种迭代会很痛苦。在后端传输搜索逻辑。：）

如果您要修改前端，请在加密时添加超时/去抖

var delay = null;

$( el ).keyup( function () { 

     if ( delay ) clearTimeout( delay );

      var delay = setTimeout( function () { 

          // your search logic

      } );
 } );

Answer 2

假设您在表单中放置了提交按钮，请为表单提供ID。

<form id="search-form">

更改行

$('#search').keyup(function(){

到

$('#search-form').on('submit', function (e) {
     e.preventDefault();

尝试更改此JSON搜索，以便仅在按下提交按钮时进行搜索

2 个答案: