Jquery 搜索常见问题 - 稍作修改答案

【问题标题】：Jquery Search FAQ - Slight modificationJquery 搜索常见问题 - 稍作修改
【发布时间】：2012-07-28 19:39:26
【问题描述】：

我之前问过一个问题，但我需要更多信息。我发现这个很棒的 sn-p 用于搜索常见问题：

http://jsfiddle.net/pT6dB/

我想找到一个包含“round 和”Earth“的问题。但是，如果我在looks 中键入“round Earth”，它会专门针对“round Earth”而无法找到。我希望它是一个“AND”查询。

这会是一个简单的修改吗？

【问题讨论】：

标签： javascript jquery search

【解决方案1】：

您需要单独搜索每个术语，并建立一个查询。

var term = $(this).val().trim();

var words = term.split(' ');

var selector = "#result LI";

for(var i = 0; i < words.length; i++){
    selector += ':contains(' + words[i] + ')'
}

$(selector).show();

更新：这是为您准备的小提琴，增加了不区分大小写的功能

http://jsfiddle.net/pT6dB/

【讨论】：

那么，如果我使用您的代码并搜索“测试搜索”，那么结果应该只包含“测试”和“搜索”这个词吗？我可以看到您正在使用修剪和拆分功能并以结果 LI 为目标，但我不确定如何集成它。我是否将此代码放在 .ready(function( {
@James Willson：您必须检查搜索框中的空间；如果有空间，一个人很可能正在搜索 2 个术语；所以只有当你找到两者时才显示结果。
知道了。所以我们每次看到空格（即line2）时都会拆分。该代码在基本层面上对我来说是有意义的，但我是 jquery 的新手，我不明白你将如何集成它。有人可以给我看看吗？或者我应该试一试吗？
我不知道 jquery 并且我是编码新手，但我试了一下：jsfiddle.net/pT6dB/45

【解决方案2】：

更新了 Fiddle 以搜索不区分大小写。

http://jsfiddle.net/pT6dB/161/

$(document).ready(function() {
    $('LI STRONG').click(function(e) {
        e.preventDefault(); // disable text selection
        $(this).parent().find('EM').slideToggle();
        return false; // disable text selection
        
        

    });


jQuery.expr[':'].Contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};


jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};

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

}); // end document ready

#faq EM {
display:none;
}

#faq LI STRONG {
font-weight:normal;
color:#246;
text-decoration:underline;
cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="faq">
    <p><label>Search</label><br />
<input id="search" value="" size="30" /></p>
<p>&nbsp;</p>
<ul id="result">
  <li><strong>How round is the Earth?</strong><br /><br /><em>
  Very round.
  <br /><br /></em></li>
  <li><strong>How rectangular is paper?</strong><br /><br /><em>
  Very rectangular.
  <br /><br /></em></li>
</ul>
</div><!-- #faq -->

【讨论】：