javascript - Ajax/jQuery 实时搜索正在复制输出结果

Question

我目前正在使用 Ajax 和 jQuery 实时搜索来查找 JSON 文件中的结果。脚本工作正常，但这只是一个问题 - 它重复结果数据。

示例:

标记:

<div class="row">
  <h3>Live Search Results</h3>
  <div id="update-results">
  <p>event_name | club_name | memberid</p>
    <ul id="update">
      <!-- <li><a href="#"></a></li> -->
    </ul>
  </div>
</div>

脚本:

$('#search').keyup(function() {
    var searchField = $('#search').val();
    var $update = $('#update');
    $update.empty();

    $.get("getEventsWithVideos.php?text=" + searchField, function(data) {
      var vals = jQuery.parseJSON(data);

        if($.isArray(vals['Event'])) {
          $.each(vals['Event'], function(k,v){
            $update.append("<li value='"+v['id']+"'><a href='#'>" + v['event_name'] + "</a></li>");
          });
        } else { 
            $update.append("<li value='"+vals['Event']['id']+"'><a href='#'>" + vals['Event']['event_name'] + "</a></li>");
        }

    });
});

我尝试过调试并停止错误，但没有成功。谁能帮我解决这个问题吗？

Answer 1

将empty()放入响应处理程序中:

$.get("getEventsWithVideos.php?text=" + searchField, function(data) {
     $update.empty();

基本上，您会在每次击键时清除列表(快速)，然后请求数据，然后(稍后)附加返回的结果(根据时间的不同，可能是多个结果) .