подсветка автозаполнения 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></b>'); 
    },
        minLength: 2 
    });

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

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

21
autocomplete javascript jquery

2 ответов

спасибо Девиду Мердок в 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></b>");
  return $( "<li></li>" )
     .data( "item.autocomplete", item )
     .append( "<a>" + t + "</a>" )
     .appendTo( ul );
};
$("#keyword").autocomplete({ 
  source: "ajax/autocomplete.php?action=keyword", 
  minLength: 2 
});
32

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

    <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="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css"
            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></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>

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

2