Question

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

我有一个显示所有记录的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();
});

});

任何帮助都将不胜感激。

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

Answer 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的父行，所以你需要调整你的隐藏代码行来找到最接近的{{ 1}}像这样：

tr

虽然这样做，您可能想要更改变量的名称，因为它不再仅仅绑定到“行”。我只是在这里保持变量名称相同，因此您只能看到使这项工作所需的代码更改。

预填充搜索框使用PHP / Jquery

1 个答案: