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和角度材質中沒有正確突出顯示搜索文字

回答

相關問題