0

我在突出显示 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>
4

1 回答 1

0

更新

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

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到自动完成选项（查看小提琴）。

于 2012-10-30T16:40:49.253 回答