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

正規表現オブジェクトを使用してください: http://jsfiddle.net/DQqLs/

次に、テキスト ボックスから文字列を渡すと、スパン タグで一致が強調表示されます。

<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 に答える
1

検索文字列のすべての出現箇所を次のようなものに置き換えることができます

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

どこ

.highlighted {
   background-color: yellow;
}

次の検索を行う前に、前の検索から強調表示を削除することを忘れないでください。

これは単にアイデアを提供するためのものであり、強制的に を使用する必要はなく、好みに応じspanてハイライトのスタイルを設定できます。また、検索と置換をテキストを含む要素に限定した方がよいでしょう。

于 2012-12-20T08:50:55.380 に答える