Question

我有一个包含超过200个链接的页面，使用这种格式。

<h1>
  <a href="somelink">Somelink</a>
  some text that explain the meaning of the link. 
</h1>

现在，为了便于搜索此链接，我已经放了一个搜索框。

我的要求是搜索所有这些标记并找到与之相关的链接搜索框并隐藏链接的其余部分。

如何在javascript中执行此操作？（我知道基本的javascript / jquery的东西，但如何进行全文搜索？）我不需要根据相关排序，只是过滤器和show hide足够好。

Answer 1

您可以枚举所有h1代码获取内部html并执行indexOf，或者您可以使用jQuery它具有自定义contains功能，该功能会返回给出文字。

以下是从jQuery docs

复制的示例

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<div>John Resig</div>

<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>


<script>
$("div:contains('John')").css("text-decoration", "underline");
    </script>
</body>
</html>

Answer 2

希望您觉得这很有用。它可能不是优雅或最有效但它会让你输入多个搜索词并给出部分匹配（可能需要也可能不需要）。当我点击搜索按钮时它的方式将隐藏所有其他元素，除了匹配任一搜索词的元素，但你可以修改它以使用结果数组中的元素做任何你想做的事情。我不建议完全使用它，但希望它能为您提供一个关于如何实现自己的参考点（如果您选择使用除quicksearch之外的解决方案）。

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type='text/javascript' language='javascript' >
$(document).ready(function() {
    var links = new Array();
    $("h1").each(function(index, element) {         
        links.push({
            text: $(this).text(),
            element: element
        });
    });

    $("#searchButton").click(function() {
        var query = $("#searchBox").val();
        var queryTerms = query.split(' ');

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

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

    });     

});
</script>

</head>
<body>
<p>
<input id="searchBox" type="text" />
<input type="button" id="searchButton" value="Search" />
</p>

<h1>
  <a href="somelink">Somelink1</a>
  asdf
</h1>
<h1>
  <a href="somelink">Somelink2</a>
  ssss
</h1>
<h1>
  <a href="somelink">Somelink3</a>
  3333
</h1>
<h1>
  <a href="somelink">Somelink4</a>
  232323
</h1>
<h1>
  <a href="somelink">Somelink5</a>
  fffff
</h1>

 </body>
 </html>

Answer 3

我找到了一个。

http://github.com/riklomas/quicksearch

使用正则表达式进行搜索。

用JavaScript搜索文字？

3 个答案: