过滤字符串起始值

Question

我有一个搜索栏来显示包含特定值的单元格的行，但我只想要那些以该值开头的行，前提是它们以它开头，而不是它们包含在中间字符串。

这就是我所拥有的：

var $rows = $('#tableID tbody tr');

$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

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

Answer 1

您的代码做了什么：您正在使用indexOf 来测试val 的存在（~ operator 正在将-1 转换为@987654327 @ 即"falsy" 和!~text.indexOf(val) 基本上是在测试val 是否在text 中的任何位置。

解决方案：只需检查indexOf 是否为0（换句话说，val 是从text 中的索引0 开始）：

var $rows = $('#tableID tbody tr');

$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

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

旁注：理解“只显示这样的行”的代码比理解“隐藏所有不显示的行”更简单像这样”。我建议像这样更改代码的结构：

 $rows.hide()
 $rows.filter(/* your filter code */).show()

（这意味着从 return 语句中删除感叹号）

Answer 2

只需检查indexOf() 的结果是否等于0。而不是!~text.indexOf(val) 使用text.indexOf(val) !== 0。

Answer 3

是否可以与以下过滤器链接组合使用：A、、B、C？

然后make下搜索输入<a href="#A">

然后开始过滤这个“词”？

var $rows = $('section article');
$('#search').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();});