Home/ Questions/Q 9016235
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T03:56:34+00:00

I have a text box, a search button and a huge amount of text

  • 0

I have a text box, a search button and a huge amount of text in a page. What I want to do is, I want to type a string in the text box and click on search button. When i do so, I want all the results highlighted in that page. How do I achieve this?

Here is the POC of my code-

<%@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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use a regexp object: http://jsfiddle.net/DQqLs/

    You can then pass in the string from the text box, and it will highlight the matches with a span tag.

    <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>
    • 0