jQuery UI : AutoComplete with hilight.

Introduction

You've been using google before right ?
Google searchbox can display a similar message below searchbox.
This project can do that, too. (This project modify from jQueryUI, Please visit for more information.)

Step 1: Add Search textbox to your html body.

        input type="text" id="txtSearch"
    

Step 2: Add CSS to your html.

       
        .searchhilight
        {
            font-weight:bold;
            color: #ff3333;
            text-decoration:underline;
        }
 
    

Step 3: Add jQuery And jQueryUI and other Script in your web.

        link href="CSS/jquery-ui.css" rel="stylesheet" type="text/css"
        script src="scripts/jquery.min.js" type="text/javascript"
        script src="scripts/jquery-ui.min.js" type="text/javascript"
    

Step 3: Add function below to your script tag.

    $(function () {
        $("#txtSearch").autocomplete({
            minLength: 2,
            source: autocpt.availableTags()
        });
    });
    var autocpt = {
        availableTags: function () {
            var data = [
       "ActionScript",
       "AppleScript",
       "Asp",
       "BASIC",
       "C",
       "C++",
       "Clojure",
       "COBOL",
       "ColdFusion",
       "Erlang",
       "Fortran",
       "Groovy",
       "Haskell",
       "Java",
       "JavaScript",
       "Lisp",
       "Perl",
       "PHP",
       "Python",
       "Ruby",
       "Scala",
       "Scheme"
      ];
            return data;
        }
    }
    $.ui.autocomplete.prototype._renderItem = function (ul, item) {
        item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "$1");
        return $("
").data("item.autocomplete", item).append("" + item.label + "").appendTo(ul);
    };
    

Download Demo here..>>

Now you can type java to textbox for view searchilight now ^_^.

Pls enjoy ZomDev