Question

不确定这只是我正在使用的浏览器 - 还是我编写的脚本（我是一般的4/10新手，当涉及到Javascript，尽可能多地学习） - 但是我开始实现的实时搜索有一种奇怪的闪烁效果。

$(document).ready(function(){
  $.ajaxSetup({ cache: false });

  $('#search').keyup(function(){
    $('#result').html('');
    $('#state').val('');
    var searchField = $('#search').val();

    var expression = new RegExp(searchField, "i");

    $.getJSON('api/businesses', function(data) {
      $.each(data, function(key, value) {
        if (value.name.search(expression) != -1 || value.sector.search(expression) != -1) {
          $('#result').append('<li class="list-group-item link-class"><img src="' + value.featured_image + '" height="40" width="40" class="img-thumbnail" /> '+ value.name + ' | <span class="text-muted">'+value.location+'</span></li>');
        }
      });
    });
  });

  $('#result').on('click', 'li', function() {
    var click_text = $(this).text().split('|');
    $('#search').val($.trim(click_text[0]));
    $("#result").html('');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container" style="width:900px;">
   <h2 align="center">JSON Live Data Search using Ajax JQuery</h2>
   <h3 align="center">Employee Data</h3>
   <br /><br />
   <div align="center">
    <input type="text" name="search" id="search" placeholder="Search Employee Details" class="form-control" />
   </div>
   <ul class="list-group" id="result"></ul>
   <br />
</div>

要使上述片段工作，你需要一些样本数据是json ...可能更容易在本地复制。

基本上 - 搜索效果很好，看起来非常非常生涩？是否有其他人看到这个，如果是这样，我该怎么做才能改善这一点？注：我在Chrome中看到了这种行为。

Answer 1

您的问题是每次在 keyup 事件中清除html。

$('#result').html(''); // <<< This guy

您应该首先过滤您找到的结果，并且只有在它没有发起新的API呼叫时才会过滤。

键盘搜索事件的尴尬闪烁

1 个答案: