md-highlight-text在角度Js和角度材质中没有正确突出显示搜索文字

我用angularjs开发了一个使用角度材质设计的项目。当我在我的项目中使用md-autocomplete时，我遇到了突出显示文本的问题。高亮文本显示不正确。我试图修改，但失败了。我复制md-autocomplete代码表格角材料官方网站并修改它们。我的代码是md-highlight-text在角度Js和角度材质中没有正确突出显示搜索文字

<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 ]

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

来源

2017-08-03 Nahid Hasan

删除角标签 - 角2+ – JGFMK

我觉得莫名其妙你的页面有一些CSS这是造成突出显示的文本样式的问题。 –

我同意@ GauravSrivastava的评论。在Chrome中，右键点击“高亮显示”文本，选择“检查”，然后在“样式”标签中查找任何不是角度材质CSS文件的样式。我发现最简单的方法是向右看并扫描一个不与Angular Material分开的文件。如果您没有看到，请选择每个父元素并检查其样式。您最有可能拥有您添加的CSS样式，或者位于覆盖其中一种Angular Material样式的不同库中。

来源

2017-08-08 17:58:27 adam0101

如果有人在挣扎：

在服务器侧饰板所有可能的结果字符串：

'Name' => trim($name)
删除所有空格如果有的话，这个跨度内

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

来源

2018-02-19 04:29:56

md-highlight-text在角度Js和角度材质中没有正确突出显示搜索文字

回答

相关问题