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.
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.
Also add a input box for search record.
Now create a connection string in web.config file.
}
Bind the records in GridView I have to call getStudentDetails() method inside page load event.
protected void Page_Load(object sender, EventArgs e)
{
}
Output:
For highlight search text we will use some jquery reference. Those reference we will use given below.
And also we need write css which is given below.
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.
Let’s start it with example.
Open Visual Studio-> Create new project which
is "HighlightSearchText".
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:
<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>
<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.
Leave a Comment