Подсветка автозаполнения jquery

Как я могу сделать автозаполнение jquery, что пользователь вводит в любом автозаполненном результате? Код, который я использую:

    $("#keyword").autocomplete({ 
        source: "ajax/autocomplete.php?action=keyword", 
        minLength: 2 
    });

Пробовал это реализовано по ссылке tomasz:

    $("#keyword").autocomplete({ 
        source: "ajax/autocomplete.php?action=keyword", 
        highlight: function(value, term) { 
    return value.replace(new RegExp("("+term+")", "gi"),'<b>$1</b>'); 
    },
        minLength: 2 
    });

Не повезло и там. Автозаполнение jQuery, похоже, меня ненавидит.

Обновление: спасибо Дэвиду Мердоку, теперь у меня есть ответ! См. Приведенную ниже копию @Herman.

Ответы

Ответ 1

Благодарим Дэвида Мердока за http://www.vervestudios.co/ за предоставление этого полезного ответа:

$.ui.autocomplete.prototype._renderItem = function( ul, item){
  var term = this.term.split(' ').join('|');
  var re = new RegExp("(" + term + ")", "gi") ;
  var t = item.label.replace(re,"<b>$1</b>");
  return $( "<li></li>" )
     .data( "item.autocomplete", item )
     .append( "<a>" + t + "</a>" )
     .appendTo( ul );
};
$("#keyword").autocomplete({ 
  source: "ajax/autocomplete.php?action=keyword", 
  minLength: 2 
});

Ответ 2

Мысль о том, что кто-то может найти это полезным. это полный HTML-документ, который использует использование вышеуказанных принципов. Я использовал его как protoype для некоторых из моих работ.

    <html xmlns="http://www.w3.org/1999/xhtml">

    <!--

        orders.html simply returns the following text

        Basketball#Football#Baseball#Helicopter#gubbins#harry potter#banyan


    -->

    <head id="Head1" runat="server">
        <title>AutoComplete Box with jQuery</title>
        <link href="#" onclick="location.href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css'; return false;"
            rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
        <script type="text/javascript">

            function loadData() {

                var sURL = "orders.htm";

                $.ajaxSetup({ cache: false });

                $.ui.autocomplete.prototype._renderItem = function (ul, item) {
                    var term = this.term.split(' ').join('|');
                    var re = new RegExp("(" + term + ")", "gi");
                    var t = item.label.replace(re, "<b>$1</b>");
                    return $("<li></li>")
                    .data("item.autocomplete", item)
                    .append("<a>" + t + "</a>")
                    .appendTo(ul);
                };

                $.get(sURL, function (responseText) {
                    data = responseText.split('#');

                    $("#txtSearch").autocomplete({
                        //source: availableSports
                        source: data,
                        minLength: 2 

                    });

                });

            }

        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div class="demo">
            <div class="ui-widget">
                <label for="tbAuto">
                    Enter data:
                </label>
                <input type="text" id="txtSearch" class="autosuggest" onkeyup="loadData();" />
            </div>
        </form>
    </body>
    </html>

Надеюсь, это поможет кому-то, поскольку это помогло мне.