Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Autocomplete Highlight Matching Text in Search Results Example

Jun 2, 2016
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.


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.


  • Suresh Dasari
  • Rohini Alavala
  • Sudheer Rayana
  • Madhav Sai
  • Siva Prasad
  • Mahendra Dasari
  • Praveen Alavala
  • Sateesh Chandra


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 RSS subscribe by email Subscribe by Email

0 comments :

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.