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

Question

我目前正在进行Ajax和jQuery实时搜索，该搜索会在JSON文件中找到结果。脚本工作正常，但这只是一个问题 - 它重复了结果数据。

示例：

MARKUP ：

<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>

SCRIPT ：

$('#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

将空（）放在响应处理程序中：

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

基本上你是在每次击键（快速）时清除列表，然后请求数据，然后（稍后）附加返回的结果（根据时间可能是多个结果）

Answer 2

我没有重现您的错误，但我怀疑您对服务器的多个请求有问题并且将它们全部添加而不是最后一个。可能添加以下代码将解决您的问题

$update.empty();

无论如何，我建议您使用另外两个函数：throtlle和debounce来自下划线，以防止每个keyup上有太多请求。

你也可以尝试Rx.js女巫给出以下例子（https://github.com/Reactive-Extensions/RxJS）：

var $input = $('#input'),
    $results = $('#results');

/* Only get the value from each key up */
var keyups = Rx.Observable.fromEvent($input, 'keyup')
  .map(function (e) {
    return e.target.value;
  })
  .filter(function (text) {
    return text.length > 2;
  });

/* Now debounce the input for 500ms */
var debounced = keyups
  .debounce(500 /* ms */);

/* Now get only distinct values, so we eliminate the arrows and other control characters */
var distinct = debounced
  .distinctUntilChanged();

Answer 3

尝试将此代码 $ update.empty（）; 更改为 $ update.find（'li'）。remove（）; 并将其放入响应处理程序。

在追加新值之前，这将删除所有先前的数据。希望它可能有用。