突出显示的 jQuery 自动完成多个输入

Question

在 jquery 自动完成中突出显示多个输入时遇到问题。 第一个输入得到突出显示，不幸的是第二个没有:(

所以当我输入 Java 时，这个词会变粗，但之后当我用逗号分隔 java 并输入另一个词时，这个词就不会加粗。

请帮忙

<script>jQuery(document).ready(function() {
    var availableTags=["Java","J2ee","Spring","Hibernate","CSS","HTML","Struts","Struts 2","Maven","Maven 2","Spring Roo","Warszawa","JSF 2.0","EJB"];
    $.extend($.ui.autocomplete.prototype, {
        _renderItem: function( ul, item ) {
            var term = this.element.val(),
                regex = new RegExp( '(' + term + ')', 'gi' );
            html = item.label.replace( regex , "<b>$&</b>" );
            return $( "<li></li>" ).data( "item.autocomplete", item ).append( $("<a></a>").html(html) ).appendTo( ul );
        }
    });

    function split( val ) {
        return val.split( /,\s*/ );
    }

    function extractLast( term ) {
        return split( term ).pop();
    }

    $( "#tags" )
        // don't navigate away from the field on tab when selecting an item
        .bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                    $( this ).data( "autocomplete" ).menu.active ) {
                event.preventDefault();
            }
        })
        .autocomplete({
            minLength: 0,
            source: function( request, response ) {
                // delegate back to autocomplete, but extract the last term
                response( $.ui.autocomplete.filter(
                    availableTags, extractLast( request.term ) ) );
            },
            focus: function() {
                // prevent value inserted on focus
                return false;
            },
            select: function( event, ui ) {
                var terms = split( this.value );
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push( ui.item.value );
                // add placeholder to get the comma-and-space at the end
                terms.push( "" );
                this.value = terms.join( ", " );
                return false;
            }
        });
});
</script>

Answer 1

更新

仔细看代码，问题确实出在这里：

var term = this.element.val(),
    regex = new RegExp( '(' + term + ')', 'gi' );

您将获得文本框的完整 .val()。像这样修复它：

regex = new RegExp( '(' + extractLast(term) + ')', 'gi' );

额外

无论如何，它可能不相关，但我通常会在source:函数中编写它而不是重写_renderItem。像这样：

    source: function (request, response) {
        console.log(request.term);
        var filtered = $.ui.autocomplete.filter(availableTags, extractLast(request.term));
        var regex = new RegExp('(' + extractLast(request.term) + ')', 'gi' );
        var results = [];
        filtered.forEach(function (item) {
            results.push({ label: item.replace(regex , "<b>$1</b>"), value:item });
        });
        response(results);
    },
    html: true, // see below why this is needed.

我已经更新了小提琴中的代码，它现在应该可以工作了：http://jsfiddle.net/95aH7/1/

重要提示：在加载 jQuery UI 后，您需要在脚本中包含 jquery.ui.autocomplete.html。此外，要使扩展程序正常工作，您需要将 html: true 添加到自动完成选项中（查看小提琴）。