Question

我有一个输入框，用于过滤显示的整体结果中的结果。我有一个过滤器＆＃39; startWith＆＃39;为了那个原因。现在，我需要在显示的搜索结果中突出显示搜索文本 angularJS。

例如，当我输入＆＃39; o＆＃39;在搜索框中，它应突出显示＆＃39; O＆＃39;显示的橙色。

你可以帮助我实现这个目标吗？

这是我的代码：

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', function($scope) {
 $scope.myData = [{
  'name': 'Orange'
 }, {
  'name': 'Banana'
 }, {
  'name': 'Mango'
 }, {
  'name': 'Apple'
 }, {
  'name': 'Pineapple'
 }];
 $scope.startWith = function(actual, expected) {
  var lowerStr = (actual + "").toLowerCase();
  return lowerStr.indexOf(expected.toLowerCase()) === 0;
 }
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div id="parentDiv" ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="search.name" class="searchText" id="search_txt" placeholder="Search Data" />
  <div id="childDiv">
    <p ng-repeat="obj in myData | filter:search:startWith" >{{obj.name}}</p>
  </div>
</div>

＆＃13;

Answer 1

只需通过函数运行输出即可检查您的搜索并将类添加到突出显示的部分。道具是由于这个blog for the reg ex（我讨厌正则表达式，但它们运作良好）还google

var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', function($scope) {
 $scope.myData = [{
  'name': 'Orange'
 }, {
  'name': 'Banana'
 }, {
  'name': 'Mango'
 }, {
  'name': 'Apple'
 }, {
  'name': 'Pineapple'
 }];
 $scope.startWith = function(actual, expected) {
  var lowerStr = (actual + "").toLowerCase();
  return lowerStr.indexOf(expected.toLowerCase()) === 0;
 }
 $scope.highlight = function(text, phrase) {
    if (phrase) { 
        text = text.replace(new RegExp('('+phrase+')', 'gi'),
        '<span class="highlighted">$1</span>')
     }
     return text;
 }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div id="parentDiv" ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="search.name" class="searchText" id="search_txt" placeholder="Search Data" />
  <div id="childDiv">
    <p ng-repeat="obj in myData | filter:search:startWith" >{{highlight(obj.name)}}</p>
  </div>
</div>

使用angularJS过滤器突出显示搜索结果中的搜索文本

1 个答案: