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>
|
0 comments:
Post a Comment
Note: only a member of this blog may post a comment.