Question

我正在创建自动完成功能。一切正常。但我需要突出显示包含匹配文本的整个单词。例如：

src = ['Apple', 'America', 'Apes', 'Battle of the Apes']

如果用户输入“Ap”，我会

AP PLE
的鸭 ES
Ap es之战

我想要的是什么：

苹果
的人猿
猿

的战斗

$(document).ready(function(){
    $("#searchresult").autocomplete({
        source       :'autocomplete.php',
        minLength    : 1,
        selectFirst  : true,
        matchContains: true,
        scroll       : false,
        appendTo     : '#menucontainer',
        autoFocus    : true,
        select       : function( event, ui ) { 
            window.location.href = ui.item.value;
            ui.item.value=ui.item.label;
        }
    })
    .data( "autocomplete" )._renderItem = function( ul, item ) {
        var term = this.element.val(),
            regex = new RegExp( '(' + term + ')', 'gi' );
        t = item.label.replace( regex , "<b>$&</b>" );
        return $( "<li></li>" ).data("item.autocomplete", item)
            .append( "<a style='height:30px;'><div style='width: 100%; float: left;overflow: hidden; white-space:nowrap; text-overflow: ellipsis; text-align: left;'>" + t + "</div><div style='right: 0; position: relative; float:right; font-size: 11px;margin-top:-15px; color: #b3b3b3;'>" + item.cate + "</div></a>")
            .appendTo( ul );
    }
});

Answer 1

您的正则表达式中存在错误。您匹配该术语以匹配整个单词。试试这个：

regex = new RegExp('\\S*' + term + '\\S*', 'gi');

这个正则表达式将匹配单词周围不是空格的所有内容。

jQuery UI自动完成突出显示全字而不是匹配的子字符串

1 个答案: