如何修改QuickSearch jQuery插件实现指定列仅显示搜索框

Let's break down why your search functionality is misbehaving and fix it step by step:

The Root Cause #

When you skip adding input boxes for columns 0,5,7,10, you create a mismatch between the index of your search inputs and the actual column indices in your data rows.

In your original code, you used the loop index i from the input box .each() to target the corresponding data column. But now, since some columns don't have input boxes, the input box index no longer maps directly to the original data column index. For example, your first input box (index 0) corresponds to the original column 1, but your code still tries to search column 0 in the data rows—hence the misalignment.

The Solution #

We need to track the original column indices for the columns that do have search boxes, then use those indices when binding QuickSearch. Here's the revised code:

<script type='text/javascript' src='~/Scripts/quicksearch.js'></script>
<script type='text/javascript'>
$(function () { 
    // Add header row with search inputs
    var row = $('<TR />');
    var searchableColumns = []; // Store indices of columns we want to search

    $('#WebGrid TR').eq(0).find('TH').each(function (i) {
        // Skip columns 0,5,7,10 (or adjust this condition as needed)
        if ((i == 0) || (i == 5) || (i == 7) || (i == 10)) {
            row.append('<th>&nbsp;</th>');
        } else {
            row.append('<th><input type = "text" /></th>');
            searchableColumns.push(i); // Save the original column index
        }
    });
    $('#WebGrid TR').eq(0).after(row);

    // Bind QuickSearch to each input, using the correct column index
    $('#WebGrid TR').eq(1).find('INPUT').each(function (inputIndex) {
        var targetColumn = searchableColumns[inputIndex]; // Get the original column index
        $(this).quicksearch('#WebGrid tr:not(:has(th))', {
            'testQuery': function (query, txt, row) {
                // Use the saved original column index instead of inputIndex
                return $(row).children(':eq(' + targetColumn + ')').text().toLowerCase().indexOf(query[0].toLowerCase()) != -1;
            }
        });
    });
});
</script>

Key Changes Explained #

1. Track Searchable Columns: We added the searchableColumns array to record the original index of every column we add a search input for. This keeps a reliable map between input boxes and their corresponding data columns.
2. Use Mapped Indices: When binding QuickSearch, instead of using the input box's loop index (inputIndex), we pull the original column index from searchableColumns. This ensures each input searches the correct data column every time.

Bonus: More Flexible Column Targeting #

Instead of hardcoding column indices (which breaks if your grid columns reorder), you can target columns by their header text (like the "Active" column) for better maintainability:

$('#WebGrid TR').eq(0).find('TH').each(function (i) {
    var headerText = $(this).text().trim();
    // Skip "Active" column and any hidden columns
    if (headerText === 'Active' || $(this).is(':hidden')) {
        row.append('<th>&nbsp;</th>');
    } else {
        row.append('<th><input type = "text" /></th>');
        searchableColumns.push(i);
    }
});

This way, even if your column order changes, the "Active" column will always be skipped automatically.

内容的提问来源于stack exchange，提问作者Danimal111