从 jquery/javascript 中字符串的第一个字符过滤表数据

Filter table data from first character of string in jquery/javascript

本文关键字：字符 第一个 过滤 数据 字符串 jquery javascript      更新时间：2023-09-26

我有一个表格，里面有一些记录和一个文本框。我想根据在 keyup 事件文本框中输入的字符串过滤表数据。

目前我正在使用一个代码块来过滤表数据，但它搜索表中存在于字符串中任何地方的记录。

例如：- 如果我在文本框中输入"ab"，它会使用包含关键字"ab"的字符串过滤表记录，如 abcd、babd、cdab 等。

但我的要求是当我在文本框中输入关键字"ab"时，它只搜索那些以"ab"开头的字符串，如 abcd、abdc 等。

这是我当前的代码：-

function Search_Gridview(strKey, strGV) {
    var strData = strKey.value.toLowerCase().split(" ");
    var tblData = document.getElementById(strGV);
    var rowData;
    for (var i = 1; i < tblData.rows.length; i++) {
        rowData = tblData.rows[i].cells[3].innerHTML;
        var styleDisplay = 'none';
        for (var j = 0; j < strData.length; j++) {
            if (rowData.toLowerCase().indexOf(strData[j]) >= 0)
                styleDisplay = '';
            else {
                styleDisplay = 'none';
                break;
            }
        }
        tblData.rows[i].style.display = styleDisplay;
    }
}

请帮助大家...

您可以使用 jQuery 过滤包含以 "ab" 开头的字符串的列：

var re = $("#TABLE_ID td").filter(function(i){ return this.innerHTML.startsWith("ab") })
//You can after, get the values of each td of the result of this way
re.map(function(i){return this.innerHTML})

您可以使用RegExp的测试方法。

var stringData = [
  'aaa', 'aab', 'aac',
  'aba', 'abb', 'abc'
];
var searchPrefix = 'ab';
var result = stringData.filter(function (str) {
  // return true if str has prefix with searchPrefix.
  return (new RegExp('^' + searchPrefix)).test(str);
});
console.log(result);

JavaScript Regexp 参考

这似乎是最优雅的解决方案。

将搜索行为从"存在于数据中的任何位置"更改为"数据以 "开头。您只需要在原始代码的一行上更改一个字符，仅此而已。

从这里更改此行..

if (rowData.toLowerCase().indexOf(strData[j]) >= 0)

成这个...

if (rowData.toLowerCase().indexOf(strData[j]) == 0)

它的作用是强制 indexOf（） 解决零问题，而不是允许中间字符串匹配。

下面是用于复制和粘贴到项目中的完整（已修改）代码，例如 html 表过滤器。

function Search_Gridview(strKey, strGV) {
    var strData = strKey.value.toLowerCase().split(" ");
    var tblData = document.getElementById(strGV);
    var rowData;
    for (var i = 1; i < tblData.rows.length; i++) {
        rowData = tblData.rows[i].cells[3].innerHTML;
        var styleDisplay = 'none';
        for (var j = 0; j < strData.length; j++) {
            if (rowData.toLowerCase().indexOf(strData[j]) == 0)
                styleDisplay = '';
            else {
                styleDisplay = 'none';
                break;
            }
        }
        tblData.rows[i].style.display = styleDisplay;
    }
}
  • Search_Gridview（） = 函数的名称。
  • strKey = 输入搜索字符
  • strGV = html table>
相关文章：