Question

我在jquery autocomplete highlited中获取多个输入时遇到问题。第一个输入得到高位，第二个输入得不到：（

因此，当我输入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' );

<强> EXTRA

无论如何，它可能没有关系，但我通常做的是为了获得大胆的效果，是在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添加到自动填充选项（查看小提琴）。

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

1 个答案: