Friday, August 24, 2012

jQuery UI : AutoComplete with hilight.


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.

            color: #ff3333;

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 () {
            minLength: 2,
            source: autocpt.availableTags()
    var autocpt = {
        availableTags: function () {
            var data = [
            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); };

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

    Pls enjoy ZomDev

    No comments:

    Post a Comment