Highlight Search Text in Asp.Net

In this article we will learn how to highlight, search text on a page. It works like Ctrl + F functionality on any web browser or office package, programming language or anywhere. Perform this task we will create and Web Application add a web page and bind dynamic data from database.

Let’s start it with example.

Open Visual Studio-> Create new project which is "HighlightSearchText".

After click on OK button.

After click OK button out project is created successfully.

Now add a web page with name “Index.aspx”.

After click on Web Form our Index.aspx page is created successfully and  bind the record I will use GridView Control on Index.aspx.

<form runat="server" class="panel-body">

          <div style="margin-top:50px" >

            <asp:GridView ID="hlGrid" runat="server" Style="width: 60%; margin-left: 100px"

Font-Names="Arial" CellPadding="3" GridLines="Horizontal" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px">

                <AlternatingRowStyle BackColor="#F7F7F7" BorderColor="#00FFCC" />

                <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />

                <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />

                <PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" >

                <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />

                <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />

                <SortedAscendingCellStyle BackColor="#F4F4FD" />

                <SortedAscendingHeaderStyle BackColor="#5A4C9D" />

                <SortedDescendingCellStyle BackColor="#D8D8F0" />

                <SortedDescendingHeaderStyle BackColor="#3E3277" />

            </asp:GridView>

        </div>

      </form>

Also add a input box for search record.

<div class="panel-heading">

<div class="row">

<div class="col-lg-6" style="margin-top: 20px;margin-left: 260px;">

<div class="input-group">

<label><b>Search:</b> </label> <input type="text" class="form-control search" placeholder="Search......" style="height:25px;width:20%">                        

</div>

</div>

</div>

</div>

Now create a connection string in web.config file.

<connectionStrings>

    <add name="con" connectionString="Data Source=XX000; database=XXXX; Integrated Security=True" providerName="Sql.Data.Client" />

  </connectionStrings>

Get connection string from web.config file.

public static readonly string mainConnectionString = ConfigurationManager.ConnectionStrings["con"].ToString();

And then get data from database. Create a function which return the list of all player.

public DataTable getStudentDetails()

        {

            SqlCommand cmd = new SqlCommand();

            SqlConnection con = new SqlConnection(mainConnectionString);

            cmd.CommandType = CommandType.StoredProcedure;

            cmd.CommandText = "GetAllPlayer";

            cmd = new SqlCommand(cmd.CommandText, con);

            SqlDataAdapter adapter = new SqlDataAdapter(cmd.CommandText, con);

            DataTable players = new DataTable();

            adapter.Fill(players );

            return players ;

        }

Bind the records in GridView I have to call getStudentDetails() method inside page load event.

protected void Page_Load(object sender, EventArgs e)
{

  hlGrid.DataSource = getStudentDetails();

  hlGrid.DataBind();

}

Output:

For highlight search text  we will use some jquery reference. Those reference we will use given below.

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>

<script type="text/javascript" src="highlight.js"></script>

And also we need write css which is given below.

<style type="text/css">    

   .highlight {

            background-color: yellow;

        }

</style>

And then get data from database. Output:  Now write a query, when enter any value in input text it show searched text in yellow color. For do this we use keyup event.

<script type="text/javascript">

        $('.search').keyup(function () {

              $('.searchText').removeHighlight().highlight($('.search').val());

       })

    </script>

Input text has search class when we write any character in input text then fire keyup event and find the text inside searchText  class and show it in yellow color.

Output:

Conclusion: In this article we will learn, how to implement Ctrl + F functionality in Asp.net Web form and we can use this login in anywhere in programming language.