Javascript AJAX追加重复的结果

我正在一个Laravel应用程序中开发一个实时搜索功能，但是我遇到了一些问题，因为我得到了重复的附件，例如我输入了Andrew

我从A到W开始按的每一个键，我都会一次又一次地追加结果，所以Andre创建了6个表行，但我希望它只能是一行

第二个问题是，如果我删除所有输入，我会试图显示我的初始_表，但这不起作用

我尝试更改$'ajax'。appendrow；从append到html，但无论得到多少个匹配项，我只有一个结果

<table id="usertable">
        <thead>
          <tr>
            <th>Name</th>
            <th>Tier</th>    
          </tr>
        </thead>
        <tfoot>
          <tr>
            <th>Name</th>
            <th>Tier</th>
          </tr>
        </tfoot>
        <tbody id="ajax">
            {{-- search results here  --}}
        </tbody>
        <tbody id="initial_table">
          @foreach ($users as $user)
          <tr>
          <td><a href="/admin/user/{{$user->id}}">{{$user->username}}</a> </td> 
            <td>{{$user->tier}}</td>
          </tr>  
          @endforeach



        </tbody>
      </table>

这是我的Javascript

<script>
});
// })
document.getElementById("search").addEventListener("keyup", searchUsers);
document.getElementById("search").addEventListener("change", searchUsers);

function searchUsers(){
    if(this.value != '') {
        $.ajax({
            url: '/admin/searchUsers?search=' + this.value,
            method: 'GET'
        }).done(function(response){

            console.log(typeof response);
            console.log(response);
            if(response.length < 1) {
                $('#ajax').append('<span class="text-center">No results found!</span>'); 
                $('#initial_table').hide(); 
            }
            else {
                $.each(response, function(index, obj){
                var row = $('<tr>');
                    row.append('<td> <a href="/admin/user/' + obj.id + '">' + obj.username +  ' AJAX' + '</td>');
                    row.append('<td>' + obj.tier + '</td>');
                    $('#ajax').append(row);
                    $('#initial_table').hide();

            });
            }

        });
    }

}


</script>

---

试图添加一些注释进行解释。希望能有帮助

document.getElementById("search").addEventListener("keyup", searchUsers);
document.getElementById("search").addEventListener("change", searchUsers);

function searchUsers(){
    if((this.value.trim()) != '') // even for extra space it should not allow in
    {
        $.ajax({
                  url: '/admin/searchUsers?search=' + this.value,
                  method: 'GET'
          }).done(function(response)
          {

                console.log(typeof response);
                console.log(response);
                $('#ajax').empty();             //for 1st query :-on every ajax call it will first empty "#ajax" tbody 
                $('#initial_table').hide(); 

                if(response.length < 1) 
                {
                    $('#ajax').append('<span class="text-center">No results found!</span>'); 

                }
                else 
                {
                              $.each(response, function(index, obj)
                              {
                                        var row = $('<tr>');
                                        row.append('<td> <a href="/admin/user/' + obj.id + '">' + obj.username +  ' AJAX' + '</td>');
                                        row.append('<td>' + obj.tier + '</td>');
                                        $('#ajax').append(row);
                             });
                }

         });
    }else              // for 2nd query :- your code missing this part to show initial tbody if search text is all blank
    {
        $('#initial_table').show();
        $('#ajax').hide();
    }

}

---

不要附加每个结果，构建整行内容，然后在最后用.html替换它们。表的初始状态如何？初始状态是什么？我相信如果你在展示一些东西，你会有疑问的。只要在搜索为空时再次运行该程序即可。这是初始状态：foreach$users as$user{{{$user->tier}}endforeach在调用searchUsers函数之前，将row定义为全局变量，如var row=；然后使用，行=$；行。追加'+obj.username+'AJAX'+；row.append+obj.tier+；$'ajax'.appendrow；$'初始_表''隐藏；你好代码可以工作，但有一个奇怪的bug。我键入的第一个搜索有效，但从第二个搜索开始，ajax div保持显示：None我已通过添加以下代码修复了它：if$ajax.is:hidden{$ajax.show；}