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 に答える