使用 AJAX 过滤数据答案

【问题标题】：Filter out data with AJAX使用 AJAX 过滤数据
【发布时间】：2023-03-10 21:23:02
【问题描述】：

我将 MySQL 数据库中的数据检索到一个简单的表中。在这张桌子上方我应该有一个文本输入。在此输入中输入关键字时，我想取消表格中的所有显示数据并显示由 %LIKE% 运算符找到的与输入的关键字匹配的数据。
jQueryUi Autcomplete、FooTable 和几个 Yii 扩展有类似的东西，但我想从头开始。关于如何做的任何想法？链接？
我的知识：

$.ajax({
  url: 'ajax/test.html',
  success: function(){
    alert('Load was performed.');
  }
});

【问题讨论】：

在 google 上搜索 MySQL ajax 搜索或试试这个例子 [w3schools.com/php/php_ajax_database.asp]

标签： php jquery mysql ajax yii

【解决方案1】：

我要给你的不是完整的代码。你想自己做，所以这里只是逻辑。

在你的 index.php 文件中

<input type="text" name="autocoplete" id="autocomplete"/>
<div id="result"></div>

<script type="text/javascript">
    $(document).on('keyup', '#autocompelte', function(){

        var text = $('#autocomplete').val();

        $.post('process.php', {text:text}, function(resultData){
            //Treat your resultData and convert into HTML for example
            $('#result').html(myHTMLResult);
        }, 'json'); //I want my result as JSON
    });
</script>

进程.php

if(true === isset($_GET['text']) && false === empty($_GET['text']))
{
    //Do your query where you field is like %$_GET['text']% : example : SELECT * FROM mytable WHERE myfield like %$_GET['text']%
    //Store all your result in an array
    //Format this array into json to be easy to treat with json
    //Send this json back to your index.php file.

    echo json_encode($listResult);
}

【讨论】：

你应该在使用 append 之前清理你的身体。你在寻求帮助，但现在问题出在哪里？
问题是我正在向输入输入数据，但表格未填充。我的 json 看起来像这样： [["4",null,"SICO \u21163 \u041c\u0430\u0440\u0430\u0444\u043e\u043d \u041a\u043b\u0430\u0441\u0441\u0438\u0447. 3\u0448 \u0442, \u0420\u0424","1","2","SICO"]]
在 jsondata 上循环时删除响应。所以把$.each(jsondata.response, function(i, d)()...改成$.each(jsondata, function(i, d)()...。

【解决方案2】：

@ThinkTank 非常感谢您的帮助。它工作得很好。这是我的最终代码：

$(document).ready(function() {
        $('#input').keyup(function(eventObject){
            //cancel all displaying data in the table if keyword exists
            if($(this).val()) {
                //$("td").hide();
                $("td").remove();
                //data hid, now send data to server
                var orgValue = $(this).val();
                $.ajax({
                    url: '/products/RetrieveData',
                    data: 'term='+orgValue,
                    success: function(data) {
                        var jsondata=$.parseJSON(data);
                        $.each(jsondata, function(i, d) {
                            var row='<tr>';
                            $.each(d, function(j, e) {
                                row+='<td>'+e+'</td>';
                            });
                            row+='</tr>';
                            $('#table tbody').append(row);
                        });
                    }
                });
            } else {
                $("td").show();
            }
        });
    } );

只是一些想法：
1. 一旦我找到（过滤掉）我需要的东西，我用退格键清除输入。如何将表格设置为包含数据的初始状态？

【讨论】：