0

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

这是我的代码的 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>
4

2 回答 2

1

您可以用类似的东西替换所有出现的搜索字符串

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

在哪里

.highlighted {
   background-color: yellow;
}

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

这只是给您一个想法，您不必使用 aspan并且您可以根据自己的喜好设置突出显示的样式。此外，最好将搜索和替换限制为包含文本的元素。

于 2012-12-20T08:50:55.380 回答
1

使用正则表达式对象：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>
于 2012-12-20T09:15:11.137 回答