Question

我开发了一个带有角度的项目，并用角度材料设计它。当我在项目中使用md-autocomplete时，我遇到了突出显示文本的问题。高亮文本无法正确显示。我试图修改但失败了。我复制了角度材料官方网站的md-autocomplete代码并对其进行了修改。我的代码是

 <div layout="row">
                <div flex="50">
                    <md-autocomplete flex required
                                     md-input-name="autocompleteField"
                                     md-input-minlength="2"
                                     md-input-maxlength="18"
                                     md-no-cache="noCache"
                                     md-selected-item="selectedItem"
                                     md-search-text="searchText"
                                     md-items="item in querySearch(searchText)"
                                     md-item-text="item.Name"
                                     md-require-match
                                     md-floating-label="Report To Name or Id">
                        <md-item-template>
                            <span md-highlight-text="searchText" md-highlight-flags="i">{{item.value}}-{{item.Name}}</span>
                        </md-item-template>
                        <div ng-messages="projectForm.autocompleteField.$error" ng-if="projectForm.autocompleteField.$touched">
                            <div ng-message="required">You <b>must</b> have a favorite state.</div>
                            <div ng-message="md-require-match">Please select an existing state.</div>
                            <div ng-message="minlength">Your entry is not long enough.</div>
                            <div ng-message="maxlength">Your entry is too long.</div>
                        </div>
                    </md-autocomplete>
                </div>
            </div>

我的AngularJs代码是

$scope.querySearch=function(query) {
    var results = query ? $scope.Employees.filter($scope.createFilterFor(query)) : $scope.Employees;
    var deferred = $q.defer();
    $timeout(function () { deferred.resolve(results); }, Math.random() * 1000, false);
    return deferred.promise;
}


$scope.loadEmployee = function () {
    return $scope.EmployeeList.map(function (employee) {
        return {
            value: employee.EmployeeId,
            display: employee.EmployeeName.toLowerCase(),
            Name:employee.EmployeeName
              }
    })
}

$scope.createFilterFor=function(query) {
    var lowercaseQuery = angular.lowercase(query);

    return function filterFn(employee) {
        return (employee.display.indexOf(lowercaseQuery) === 0 || employee.value.indexOf(lowercaseQuery)===0);
    };

}

此问题的屏幕截图如下所示：

[ Screenshot ]

请帮我解决这个问题。我在等待你的积极回应。

Answer 1

我同意@ GauravSrivastava的评论。在Chrome中，右键单击“突出显示”文本，选择“检查”，然后在“样式”选项卡中查找不是Angular Material CSS文件的任何样式。我发现最简单的方法是向右看并扫描一个不属于Angular Material的文件。如果您没有看到任何内容，请选择每个父元素并检查其样式。您很可能已经添加了一个CSS样式，或者位于覆盖其中一个Angular Material样式的不同库中。

Answer 2

如果有人在挣扎：

在服务器端修剪所有可能的结果字符串：

'Name' => trim($name)
删除此范围内的所有空格（如果有）

<span md-highlight-text="searchText">{{item.Name}}</span>

md-highlight-text不会在Angular Js和Angular Material中正确突出显示搜索文本

2 个答案: