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

【问题标题】：md-highlight-text not highlighting the search text properly in Angular Js and Angular Materialmd-highlight-text 未在 Angular Js 和 Angular Material 中正确突出显示搜索文本
【发布时间】：2017-08-03 12:09:34
【问题描述】：

我用 angularjs 开发了一个项目，并用 angular 材料设计了它。当我在我的项目中使用 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);
    };

}

这个问题的截图如下：

[]

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

【问题讨论】：

移除 angular 标签 - angular 2+
我认为您的页面有一些 css 导致突出显示的文本样式问题。

标签： angularjs angular-material

【解决方案1】：

如果有人在挣扎：

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

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

&lt;span md-highlight-text="searchText"&gt;{{item.Name}}&lt;/span&gt;

【讨论】：

【解决方案2】：

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

【讨论】：