php - Live Search 在 keyup 后不删除 'old' 数据

Question

我已经构建了一个实时搜索内联 x 可编辑页面。 x-editable 一切正常，但我的实时搜索遇到了一个大问题。

每次我在搜索表单中输入一个字符时，脚本都会将合适的输出放在列表的末尾，但不会删除“旧”输出。

我环顾四周，测试了几种可能性，但没有成功，希望你能给我一些帮助。

谢谢。

这是我的问题的(希望如此)小 jpg: https://dolnik.di-eredar.de/ultimo/images/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 调用。