2013-03-18 160 views
2

我遇到了一个我无法进一步思考的问题。 简而言之,我有一个ul与数百li,每个li有几十个字作为文本;在列表的最顶端,我已经为用户输入了一些输入框以输入一些关键字;比方说,我想从这个庞大的列表中过滤掉只有在同一行中存在以下三个单词的行:“红色甜草莓”。被点击搜索按钮,该线被过滤掉,并在那里我只有两个包含我感兴趣的话行如何在单个查询中搜索多个子字符串

LI1:“我迫不及待地吃一些红色甜草莓

LI2 :“现在是夏天,红色甜草莓现在很新鲜”

直到这一点一切都很好。

当三个查找单词被字符串中的其他单词或字符分隔时,就会出现问题。 所以,采取了上例中,过滤器永远不会告诉我下面一行:

LI3道:“甜草莓是现在市场上的”

所以,在这里我放下整个功能筛选和排序出从上面例子的结果:

$(document).ready(function() { 
     var links = new Array(); 
     $("h4").each(function(index, element) { 
     links.push({ 
      text: $(this).text(), 
      element: element 
     }); 
    }); 

    $("#searchbutton").click(function() { 
     var query = $("#inputtext").val(); 
     var querywords = query.split(','); 

     var results = new Array(); 
     for(var i = 0; i < querywords.length; i++) { 
      for(var j = 0; j < links.length; j++) { 
       if (links[j].text.toLowerCase().indexOf(querywords[i].toLowerCase()) > -1) { 
        results.push(links[j].element);      
        } 
      } 
     } 

     $("h4").each(function(index, element) { 
      this.style.display = 'none'; 
     }); 
     for(var i = 0; i < results.length; i++) { 
      results[i].style.display = 'block'; 
     } 

    });  

}); 

是否可以搜索多个子串并得到结果,即使子串是由字符或换句话说分开吗?

+0

在第一个for循环不应该'querytext'是'querywords'? – MikeM 2013-03-18 23:45:53

+0

是的,查询字词。我已更新!在这个论坛上,我只是将所有的“querytext”改成了“querywords”(为了强调我的例子中的单词的作用),并且我跳过了那个。谢谢。但这不是原因。 – Auto4x4Motor 2013-03-19 06:29:45

+0

MikeM。我试过你的代码以适应我的功能,但不幸的是,由于我对RegEx语法的理解不够,我无法使其工作。现在我正在学习这个RegEx的全部内容。再次感谢您的代码。 – Auto4x4Motor 2013-03-20 06:29:58

回答

5

这里是做什么我想你想的一种方式。

var results = new Array(); 
for (var i = 0; i < querywords.length; i++) { 
    var regex = new RegExp( 
     '(?=.*\\b' + querywords[i].split(' ').join('\\b)(?=.*\\b') + '\\b)', 'i' 
    ); 
    for (var j = 0; j < links.length; j++) { 
     if (regex.test(links[j].text)) { 
      results.push(links[j].element); 
     } 
    } 
} 

例如,如果querywords包含的项目"red sweet strawberries",创建将是

/(?=.*\bred\b)(?=.*\bsweet\b)(?=.*\bstrawberries\b)/i 

三个正look-aheadsregex被使用,以使得其包含在同一行的三个单词串通过测试(如果它们被字边界包围)。

演示:JSFIDDLE

+0

这真是太棒了,MikeM!您的解决方案必须位于Google搜索周围的该问题的顶级搜索查询中。我现在看到indexOf对于更广泛的搜索功能非常有限。非常感谢您的努力......关心! – Auto4x4Motor 2013-03-20 11:34:37

+0

如何标记此线程已解决? – Auto4x4Motor 2013-03-20 11:35:31

0

如果我理解正确此,整个问题是:

var querywords = query.split(','); 

在这个例子中查询你有没有逗号。所以我想这是一个错误?与空间分割查询:

var querywords = query.split(' '); 
+0

如果我用空格分隔,那么结果会让我回到“红色”的一行,“甜”的一行,等等。 – Auto4x4Motor 2013-03-19 06:31:22

+0

无论如何,我并不是在寻找用户来分割任何东西,因为他期望一起找到两个或三个词的表达,而不是分裂。 – Auto4x4Motor 2013-03-19 06:32:34

+0

但是你为什么用逗号分隔?这没有意义。只需用空格拆分查询即可。您可以简单地测试每行中找到多少查询字词。仅添加找到所有查询字的行。或者,您可以按找到的查询字符数排序行。 你想让查询词靠近在一起吗?确保indexOf返回值之间的差异不是太大。 也许正则表达式可以解决你的问题。 – vetvicka 2013-03-19 08:47:21

相关问题