Живой поиск не удаляет «старые» данные после keyup

Question

Я создал страницу live-search-inline-x-editable. Все отлично работает с x-editable, но у меня большая проблема с моим live-поиском.

Каждый раз, когда я вписываю символ в форму поиска, скрипт помещает подходящие выходные данные в конец списка, но «старые» выходные данные не удаляются.

Я осмотрелся здесь и проверил несколько возможностей, но безуспешно, надеюсь, вы мне поможете.

Спасибо.

Вот (надеюсь) небольшой JPG с моей проблемой: https://dolnik.di -eredar.de / Ultimo / изображения / result.jpg

Код моего index.php выглядит так:

<script type="text/javascript" language="javascript" >
$(document).ready(function()
{


    function fetch_auftrag_data(query)
    {

        $.ajax(
        {
            url:"fetch.php?get=search_data",
            method:"POST",
            data:{query:query},
            dataType:"json",
            success:function(data)
            {
                for(var count=0; count<data.length; count++)
                {
                    var html_data = '<tr><td>'+data[count].id+'</td>';
                    html_data += '<td data-name="strasse" class="strasse" data-type="text" data-pk="'+data[count].id+'">'+data[count].strasse+'</td>';
                        html_data += '<td data-name="plz" class="plz" data-type="text" data-pk="'+data[count].id+'">'+data[count].plz+'</td>';
                        html_data += '<td data-name="ort" class="ort" data-type="text" data-pk="'+data[count].id+'">'+data[count].ort+'</td>';
                        html_data += '<td data-name="hh" class="hh" data-type="text" data-pk="'+data[count].id+'">'+data[count].hh+'</td>';
                        html_data += '<td data-name="betrag" class="betrag" data-type="text" data-pk="'+data[count].id+'">'+data[count].betrag+'</td>';
                        html_data += '<td data-name="schluessel" class="schluessel" data-type="text" data-pk="'+data[count].id+'">'+data[count].schluessel+'</td>';
                        html_data += '<td data-name="tour" class="tour" data-type="text" data-pk="'+data[count].id+'">'+data[count].tour+'</td>';
                        html_data += '<td data-name="ob" class="ob" data-type="text" data-pk="'+data[count].id+'">'+data[count].ob+'</td>';
                        html_data += '<td data-name="kunde" class="kunde" data-type="text" data-pk="'+data[count].id+'">'+data[count].kunde+'</td>';
                        html_data += '<td data-name="ap" class="ap" data-type="text" data-pk="'+data[count].id+'">'+data[count].ap+'</td>';
                        html_data += '<td data-name="ort_kunde" class="ort_kunde" data-type="text" data-pk="'+data[count].id+'">'+data[count].ort_kunde+'</td>';
                        html_data += '<td data-name="beirat" class="beirat" data-type="text" data-pk="'+data[count].id+'">'+data[count].beirat+'</td>';
                        html_data += '<td data-name="beirat_tel" class="beirat_tel" data-type="text" data-pk="'+data[count].id+'">'+data[count].beirat_tel+'</td>';
                        html_data += '<td data-name="vertrag_start" class="vertrag_start" data-type="date" data-pk="'+data[count].id+'">'+data[count].vertrag_start+'</td>';
                        html_data += '<td data-name="ht" class="ht" data-type="select" data-pk="'+data[count].id+'">'+data[count].ht+'</td>';
                        html_data += '<td data-name="md" class="md" data-type="select" data-pk="'+data[count].id+'">'+data[count].md+'</td>';
                        html_data += '<td data-name="ar" class="ar" data-type="select" data-pk="'+data[count].id+'">'+data[count].ar+'</td>';
                        html_data += '<td data-name="ir" class="ir" data-type="select" data-pk="'+data[count].id+'">'+data[count].ir+'</td>';
                        html_data += '<td data-name="gp" class="gp" data-type="select" data-pk="'+data[count].id+'">'+data[count].gp+'</td>';
                        html_data += '<td data-name="wd" class="wd" data-type="select" data-pk="'+data[count].id+'">'+data[count].wd+'</td>';
                        html_data += '<td data-name="nd" class="nd" data-type="select" data-pk="'+data[count].id+'">'+data[count].nd+'</td>';
                        html_data += '<td data-name="hsm" class="hsm" data-type="text" data-pk="'+data[count].id+'">'+data[count].hsm+'</td>';
                        html_data += '<td data-name="reikra" class="reikra" data-type="text" data-pk="'+data[count].id+'">'+data[count].reikra+'</td></tr>';
                        $('#auftrag_data').append(html_data);
                    }
            }
        });
    }



    $('#search').keyup(function(ev)
    {
        var searchString = $(this).val();

        if (searchString != '') {

                    var letters = /^[A-Za-z]+$/;

                    if (searchString.match(letters)) 
            {
                fetch_auftrag_data(searchString); 
            }
            else 
            {
                    searchString = searchString.substring(0, searchString.length - 1);
                        $('#search').val(searchString);
            }
        }else
        {
                $('#auftrag_data').html('');
        }
    }); 

  fetch_auftrag_data();
</script>

код моего search.php

if(isset($_POST["query"]))
    {
        $search = mysqli_real_escape_string($connect, $_POST['query']);
            if(!empty($search))

                $query = "SELECT * FROM d_auftrag 
            WHERE strasse LIKE '%".$search."%'
            OR plz LIKE '%".$search."%'
            OR kunde LIKE '%".$search."%'
            ORDER BY strasse
            ";


    $result = mysqli_query($connect, $query);
    $output = array();

    while($row = mysqli_fetch_assoc($result))
    {
         $output[] = $row;
    }
    echo json_encode($output);
    unset($output);
        exit;
    }else{


    $query = "SELECT * FROM d_auftrag ORDER BY strasse";


    $result = mysqli_query($connect, $query);
    $output = array();

    while($row = mysqli_fetch_assoc($result))
    {
        $output[] = $row;
    }
    echo json_encode($output);
    unset($output);
    exit;
   }

Answer 1

Потому что вы звоните:

$('#auftrag_data').append(html_data);

в вашем цикле.

Если перед вашим циклом вы empty вашей таблицы, то она заменит содержимое только что найденным содержимым.

В качестве альтернативы , вы можете построить всю строку HTML в цикле, а затем просто использовать html, чтобы заменить все в теле. Это исключит дополнительный вызов empty.