Question

我有一个文本框，一个搜索按钮和一个页面中的大量文本。我想要做的是，我想在文本框中键入一个字符串，然后单击搜索按钮。当我这样做时，我希望该页面中突出显示所有结果。我如何实现这一目标？

这是我的代码的POC -

<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Auto Completion</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<%
            List<String> strList = new ArrayList<String>();
            strList.add("\"red\"");
            strList.add("\"orange\"");
            strList.add("\"blue\"");
            strList.add("\"pink\"");
            strList.add("\"brown\"");
            strList.add("\"yellow\"");
            strList.add("\"violet\"");
            strList.add("\"indigo\"");
            strList.add("\"green\"");
            strList.add("\"grey\"");
            strList.add("\"black\"");
%>
<script>
    $(function() {
        var availableTags = <%=strList.toString() %>;
        $( "#tags" ).autocomplete({
            source: availableTags
        });
    });
    </script>
    <script>
    function selected () {
        // What to do? 
    }
    </script>
</head>
<body>

    <%=strList.toString()%>
    <div class="ui-widget">
        <label for="tags">Tags: </label>
        <input id="tags" />

        <input type="button" onclick="javascript:selected();" value="Search"/>
    </div>

</body>
</html>

Answer 1

您可以用

之类的内容替换所有出现的搜索字符串

<span class="highlighted">search string</span>

，其中

.highlighted {
   background-color: yellow;
}

在进行下一次搜索之前，请记住删除上一次搜索中的突出显示。

这只是为了给你一个想法，你不会被迫使用span，你可以根据自己的喜好设计亮点。此外，最好限制搜索并替换包含文本的元素。

Answer 2

使用正则表达式对象：http://jsfiddle.net/DQqLs/

然后，您可以从文本框中传入字符串，并使用span标记突出显示匹配项。

<style>
.highlight{
background:yellow;
}
</style>

<input type="text" id="txtBox" />
<input type="button" id="btn" value="search"/>
    <p id="pText">
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </p>

<script>
    var btn = document.getElementById('btn'),
        txtBox = document.getElementById('txtBox'),
        p = document.getElementById('pText');

        btn.onclick = function(){
           p.innerHTML = highlightText(txtBox.value,p.textContent);
        };

    function highlightText(searchStr, rawText){
        var re = new RegExp(searchStr,"g"),
            highlightedText='';
        hlText = rawText.replace(re, function(e){
            return '<span class="highlight">' + e +'<\/span>';
        });
        return hlText;
     }

</script>

一次性查找所有搜索结果

2 个答案: