Jquery 搜索 - 不区分大小写答案

【问题标题】：Jquery Search - Case insensitiveJquery 搜索 - 不区分大小写
【发布时间】：2023-03-20 01:37:01
【问题描述】：

我在创建可搜索、可切换的常见问题解答的 Jquery 脚本上获得了一些帮助。代码可以看这里：

http://jsfiddle.net/pT6dB/62/

问题是，如果有一个大写“H”的单词“How”，我搜索“h”，它不会找到它。如何使此脚本不区分大小写？

【问题讨论】：

标签： javascript jquery search

【解决方案1】：

更新

或者，您可以使用正则表达式显着减少代码量。 jsFiddle demo

$('#search').keyup(function(e) {
    // create the regular expression
    var regEx = new RegExp($.map($(this).val().trim().split(' '), function(v) {
            return '(?=.*?' + v + ')';
        }).join(''), 'i');

    // select all list items, hide and filter by the regex then show
    $('#result li').hide().filter(function() {
        return regEx.exec($(this).text());
    }).show();
});

原创

根据您当前确定相关元素的算法，您可以使用 jQuery filter 方法根据 keywords 数组过滤您的结果。这是一个粗略的想法：

// select the keywords as an array of lower case strings
var keywords = $(this).val().trim().toLowerCase().split(' ');

// select all list items, hide and filter then show
$('#result li').hide().filter(function() {
    // get the lower case text for the list element
    var text = $(this).text().toLowerCase();        

    // determine if any keyword matches, return true on first success
    for (var i = 0; i < keywords.length; i++) {
        if (text.indexOf(keywords[i]) >= 0) {
            return true;
        }
    }
}).show();

【讨论】：

这真的很有趣，但你的演示似乎并没有以同样的方式工作
问题是如果有人键入“is”，它会返回所有结果。我认为如果有人搜索“哦，你好”来搜索只包含“哦”和“你好”的结果，而不是“哦”或“你好”
我向@JamesWillson 道歉，这现在应该用作“与”而不是“或”。
我又来这里投票了，你@Richard

【解决方案2】：

改变这一行

$('#result LI:not(:contains('+keywords[i]+'))').hide();

到

$('#result LI').each(function()
{
    if(this.innerHTML.toLowerCase().indexOf(keywords[i].toLowerCase()) === -1)
    {
        $(this).hide();
    }
});

【讨论】：

【解决方案3】：

// split the search into words
var keywords = s.toLowerCase().split(' ');

// loop over the keywords and if it's not in a LI, hide it
for(var i=0; i<keywords.length; i++) {
    $('#result LI').each(function (index, element) {
        if ($(element).text().toLowerCase().indexOf(keywords) != -1) {
            $(element).show();
        } else {
            $(element).hide();
        }
    });
}

【讨论】：