Question

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

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

Answer 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>

process.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);
}

Answer 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.一旦找到（过滤掉）我需要的东西，我就用退格键清除输入。如何使用数据将表设置为初始状态？

使用AJAX过滤掉数据

2 个答案: