Question

我正在使用此脚本http://jqueryui.com/demos/autocomplete/#default和数据库。我想强调这样的打字：www.docs.jquery.com/Plugins/Autocomplete。请帮帮我。

Answer 1

看起来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>换行可能会更聪明，因为它很可能已经循环遍历每个结果。

Answer 2

我必须根据此Highlight jQuery UI autocomplete修改代码才能使其正常工作

        $("#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 );
    };

如何突出显示单词jquery ui autocomplete

2 个答案: