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

jQuery Autocomplete Highlight Matching Text in Search Results Example

Jun 2, 2016

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="">
<title>jQuery Autocomplete Highlight Matching Text in Search Results</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript">

/* 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;
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);

<style type="text/css">
li span {
<form id="form1">
<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>

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,, 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


Give your Valuable Comments

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

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