Question

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

在上面的示例中，我想输入“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;
    });

使用Jquery搜索 - 为多个术语工作

2 个答案: