JQuery подсветка автозаполнения - PullRequest
Новая
       2

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

21 голосов
/ 12 сентября 2010

Как я могу сделать так, чтобы в моем автозаполнении 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, кажется, ненавидит меня.

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

Ответы [ 2 ]

32 голосов
/ 14 октября 2011

Благодарю Дэвида Мердока по телефону 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 голосов
/ 03 сентября 2013

Мысль Сомоне может найти это полезным.это полный документ 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>$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>

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...