Как выделить слова JQuery UI автозаполнения - PullRequest
4 голосов
/ 16 июня 2010

Я использую этот скрипт http://jqueryui.com/demos/autocomplete/#default с базой данных.Я хочу выделить набранные слова, как это: www.docs.jquery.com/Plugins/Autocomplete.Пожалуйста, помогите мне.

Ответы [ 2 ]

2 голосов
/ 20 сентября 2012

Мне пришлось изменить код в соответствии с этим Выделите автозаполнение jQuery UI , чтобы оно заработало

        $("#searchBox").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "search.php",
                dataType: "json",
                data: request,
                success: function( data ) {
                    var escapedTerm=request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1");
                    var regex = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + escapedTerm + ")(?![^<>]*>)(?![^&;]+;)", "gi");
                    var result = $.map(data, function(value){
                        //console.log(value);
                        value.label=value.label.replace(regex, "<span class='highlight'>$1</span>");
                        return value;
                    });
                    response(result);
                }
            });
        },
        minLength: 3
    })
    .data('autocomplete')._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( '<a>' + item.label + '</a>' )
            .appendTo( ul );
    };
2 голосов
/ 16 июня 2010

Похоже, что на http://docs.jquery.com/Plugins/Autocomplete есть метод выделения.

Вы можете воссоздать это, взяв регулярное выражение их метода выделения и используя его для изменения результатов, которые отправляются обратно из вашего запроса ajax в вашу базу данных:

$("#example").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "search.php",
            dataType: "json",
            data: request,
            success: function( data ) {

                var regex = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi");
                var result = $.map(data, function(value){
                    return value.replace(regex, "<strong>$1</strong>");
                });
                response( result );
            }
        });
    }
});

Вероятно, было бы разумнее добавить обтекание <strong> на стороне сервера, так как оно, скорее всего, уже будет циклически повторять каждый из результатов.

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