0

我在页面上有一个搜索字段，允许用户搜索某条记录。

我有一个显示所有记录的 PHP 文件，并在顶部有一个搜索框，使用 Jquery 在用户输入时过滤结果。我想将用户的搜索结果从上一页发送到搜索框，以便他们的结果是已经过滤到他们的搜索词。

我能够使用以下代码为搜索框带来搜索词：

        <input type="text" id="filtersearch" placeholder="Search by name or phone number" value="<?php echo $search; ?>">

但是，虽然它会传输搜索字段，但在打开页面时不会过滤结果。您必须单击搜索框并按 Enter 以更新结果。

这是我正在使用的脚本

$(document).ready(function() {
var $rows = $('#orders tbody tr');
$('#filtersearch').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

});

任何帮助，将不胜感激。

另外，有没有办法将搜索过滤限制在某些字段或列？

4

1 回答 1

1

要在页面加载时过滤结果，您只需在文档准备好的元素上触发一个按键事件，如下所示：

$(document).ready(function() {
    var $rows = $('#orders tbody tr');
    $('#filtersearch').keyup(function() {
        var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

        $rows.show().filter(function() {
            var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
            return !~text.indexOf(val);
        }).hide();
    });
    $('#filtersearch').keyup();
});

为了限制搜索，你只需要限制$rows. 例如，如果您只想将一个filterable类应用于单个列中的单元格并且只搜索这些列，您可以$rows像这样调整您的声明：

var $rows = $('#orders tbody .filterable');

如果您想根据这些结果隐藏行，则需要找到td.filterable要隐藏的父行，因此您需要调整隐藏代码行以找到最接近的行，tr如下所示：

       $rows.closest('tr').show().end().filter(function() {
            var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
            return !~text.indexOf(val);
        }).closest('tr').hide();

尽管这样做，您可能希望更改变量的名称，因为它不再仅与“行”相关联。我只是在这里保持变量名称相同，因此您只能看到使其工作所需的代码更改。

于 2013-03-27T00:27:04.960 回答