javascript - 使用 Jquery 搜索 - 处理多个术语

Question

我在网上找到了这个很棒的片段，以获取可搜索的常见问题解答。但是，我想知道是否有人知道如何修改它以使用多个术语。

http://jsfiddle.net/pT6dB/

在上面的示例中，我想输入“paper Earth”以返回两个示例结果。如果我现在输入它，它不会返回任何东西。我想我想让它等同于搜索“纸”或“地球”。

任何帮助将非常感激。

詹姆士

Answer 1

您可以做的是将搜索字符串与正则表达式进行匹配以获取所有单词。然后，为每个li您检查其文本是否包含任何单词并适当地显示或隐藏。不过，我使用array.some的是仅在较新的浏览器上可用的。

我也对其进行了一些整理-并非所有代码都是必需的：http: //jsfiddle.net/pT6dB/29/。

// no need for preventDefault here - clicking a <strong> doesn't do anything
$('li strong').click(function(e) {
    $(this).parent().find('em').slideToggle();
});

// the "input" event is available on newer browsers, and is also fired when e.g.
// pasting or dragging text
$('#search').on("input", function(e) {
    // make it case-insensitive, and match against a regexp that matches
    // non-space characters
    var words = $(this).val().toLowerCase().match(/\S+/g);
    if (!words) {  // no match, i.e. no words found
        $('#result li').show();
    } else {
        $('#result li').each(function() {
            var text = $(this).text().toLowerCase();
            var show = words.some(function(word) {
                return ~text.indexOf(word);  // ~ with indexOf means "contains"
            });
            $(this).toggle(show);  // will show or hide depending on "show"
        });
    }
});

Answer 2

您需要使用 javascript string.split 函数按“”字符拆分值。然后循环遍历每个元素以查看是否有匹配项。

例如：

 $('#search').keyup(function(e) {
        var s = $(this).val().trim();
        if (s === '') {
            $('#result LI').show();
            return true;
        }

        $('#result LI').hide();

        splits = s.split(" ");

        for(x in splits){
            $('#result LI:contains(' + splits[x]+ ')').show();
        }

        return true;
    });