Introduction:
Here I will explain how to use jQuery to highlight matching text while searching with example or jQuery autocomplete highlight matching characters examples or jQuery autocomplete highlight matching text in search results. By using jQuery we can highlight matching text / characters while searching in textbox.
Description:
In previous articles I explained jQuery ui autocomplete textbox from database in asp.net, jQuery autocomplete textbox with web service in asp.net, jQuery autocomplete textbox in master page using webservice in asp.net, jQuery autocomplete textbox with multiple words separated by commas, jQuery bootstrap autocomplete textbox from database in asp.net and many articles relating to css, AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to highlight autocomplete matching text in search results in jQuery with example.
In previous articles I explained jQuery ui autocomplete textbox from database in asp.net, jQuery autocomplete textbox with web service in asp.net, jQuery autocomplete textbox in master page using webservice in asp.net, jQuery autocomplete textbox with multiple words separated by commas, jQuery bootstrap autocomplete textbox from database in asp.net and many articles relating to css, AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to highlight autocomplete matching text in search results in jQuery with example.
If you want
to highlight matching text in search results write the code like as shown below
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Autocomplete Highlight Matching Text in Search
Results</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
$("#userlist").hide();
/* Filter Names with Search Text
*/
$("#txtnames").on("keyup", function
() {
if (this.value.length > 0)
{
$("#userlist
li").removeClass("match").hide().filter(function () {
return $(this).text().toLowerCase().indexOf($("#txtnames").val().toLowerCase()) !=
-1;
}).addClass("match").show();
highlight(this.value);
$("#userlist").show();
}
else {
$("#userlist,
#userlist li").removeClass("match").hide();
}
});
/* Highlight Autocomplete
Matching Text */
function highlight(string) {
$("#userlist
li.match").each(function () {
var matchStart = $(this).text().toLowerCase().indexOf("" + string.toLowerCase() + "");
var matchEnd = matchStart + string.length - 1;
var beforeMatch = $(this).text().slice(0,
matchStart);
var matchText = $(this).text().slice(matchStart,
matchEnd + 1);
var afterMatch = $(this).text().slice(matchEnd
+ 1);
$(this).html(beforeMatch
+ "<span>" + matchText + "</span>" + afterMatch);
});
};
})
</script>
<style type="text/css">
li span {
background:#ff6;
font-weight:bold;
}
</style>
</head>
<body>
<form id="form1">
<div>
<input type="text" id="txtnames" placeholder="Search for Names" style="padding:10px; width:250px" />
<ul id="userlist">
<li>Suresh Dasari</li>
<li>Rohini Alavala</li>
<li>Sudheer Rayana</li>
<li>Madhav Sai</li>
<li>Siva Prasad</li>
<li>Mahendra Dasari</li>
<li>Praveen Alavala</li>
<li>Sateesh Chandra</li>
</ul>
</div>
</form>
</body>
</html>
|
Live
Demo
Check following live demo to highlight matching text in jQuery.
Start type in following textbox to highlight matching search results.
|
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
0 comments :
Note: Only a member of this blog may post a comment.