javascript - 将 jQuery 实时搜索结果显示为表格上的 元素

Question

我的 table 上有一个实时过滤器，作为 ERP 系统的一部分。这是表底部的文本输入，用户可以在其中键入数据库中包含的元素名称的任何部分，表将显示那些匹配的内容。

这是表格的主体:

<tbody>
<?php
while($registroBbdd = consultaRegistro($select)){
    $class="";
    $turn_id=$registroBbdd['tu_id'];
    $name=$registroBbdd['tu_name'];
    echo '<tr class="'.$class.'">
        <td><span class="tableContentRow">'.$registroBbdd['tu_name'].'</span></td>
        <td class="editColumn"><a href="#"><div class="editIcon"></div></a></td>
        </tr>'; }}      ?>
</tbody>

这是选择名称与键入的字符匹配的人的函数:

$(document).on('keydown', searchSuggestions)

function searchSuggestions (e) 
{
    var cadena = $('input[name=turn_tableFilter]').val();

    if(cadena.length>2)
    {
        $updateUrl = 'config/forms/turn_conf/turn_search.php';
        $.post($updateUrl, {tu_abrev:cadena}).success(showSuggestions);
    }
}

这个searchSuggestions函数必须工作正常，因为它可以正确调用 showSuggestions功能，删除所有 <tr>表中包含:

function showSuggestions (datos) {
$('tbody *').remove();}

问题是如何展示它们。我需要使最后一个函数类似于累积所有匹配结果的循环，然后使用相同的 <tr> 在我的 table 上实时显示它们。之前定义的结构。关于如何做到这一点有什么想法吗？我如何从 turn_search.php 获取该数据并给它一个正确的格式？

Answer 1

每次按下按键时，您都需要向服务器发送请求，并传递按下的按键参数。根据该字母表，php 将获取相关记录并显示它。这样继续下去。

因此创建一个包含 while 循环的 div。

    <tbody>
    <div id = "searched_records"> <!--this one-->
    <?php
    while($registroBbdd = consultaRegistro($select)){
        $class="";
        $turn_id=$registroBbdd['tu_id'];
        $name=$registroBbdd['tu_name'];
        echo '<tr class="'.$class.'">
            <td><span class="tableContentRow">'.$registroBbdd['tu_name'].'</span></td>
            <td class="editColumn"><a href="#"><div class="editIcon"></div></a></td>
            </tr>'; 
      }       ?> </div>

然后按照下面的方式编写删除函数。您基本上不会删除新的 div，它会删除子元素。

function showSuggestions (datos) {
    $('#searched_records').empty();
    //add new data here
    $('#searched_records').html(datos);

}