AJAX добавление дубликатов результатов

Question

Я разрабатываю функцию поиска в реальном времени в приложении Laravel, но у меня есть некоторые проблемы, потому что я получаю дубликаты, например, я набираю "Andrew".

Каждая клавиша, которую я нажимаю, начинается с «A» до «W», я добавляю результаты снова и снова, поэтому Андре создает 6 строк таблицы, но я хочу, чтобы это была только одна.

Вторая проблема заключается в том, что если я удаляю все входные данные, я пытаюсь показать свою «исходную_таблицу», но это не работает.

Я попытался изменить $('#ajax').append(row); с добавления на 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();
    }

}