AJAX追加结果重复

Question

我正在Laravel应用程序中开发一个实时搜索函数，但我遇到了一些问题，因为我得到了重复的追加，例如我键入了"Andrew"。

从"A"到"W"，我点击的每一个键都会一遍又一遍地添加结果，所以Andre创建了6个表行，但我希望它只是一个。

第二个问题是，如果我删除所有输入，我会尝试显示我的"initial_table"，但这不起作用。

我尝试将$('#ajax').append(row);从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>

Answer 1

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

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();
}
}