如何在angularjs中创建搜索过滤器和文本高亮显示
[英]how to create search filter and text highlight in angularjs
问题描述
var app = angular.module('app',['ngSanitize']); app.controller('searchCtrl',['$scope', function($scope){ $scope.searchContents = [ { title: 'Hedng one', disc_1: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.' }, { title: 'Heading tow', disc_1: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.', disc_2: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.', disc_3: 'lorem lorem lorem' }, { title: 'Heding three', disc_1: 'discription..............................................' }, { title: 'Heding four', disc_1: 'discription..............................................' } ]; }]); app.filter('highlight', function () { return function (text, search, caseSensitive) { if (text && (search || angular.isNumber(search))) { text = text.toString(); search = search.toString(); if (caseSensitive) { return text.split(search).join('<span class="ui-match">' + search + '</span>'); } else { return text.replace(new RegExp(search, 'gi'), '<span class="ui-match">$&</span>'); } } else { return text; } }; });
/* Generated by less 2.5.1 */ .ui-match { background: #FFC107; color: #fff; } .side-panel.panel-open { transform: translateX(0%); display: block; } .side-panel li { float: left; width: 100%; } .side-panel.side-panel-singlar { z-index: 10; } .search-results > ul { list-style: none; padding: 0; margin: 5%; } .search-results > li { line-height: 1.3em; }
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-sanitize.min.js"></script> <script type="text/javascript" src="js/script.js"></script> <link rel="stylesheet" type="text/css" href="js/style.css"> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div ng-app="app" ng-controller="searchCtrl"> <div class="side-panel-singla"> <input type="text" class="input-search" placeholder="Search..." ng-model="searchText" /> <button class="btn-search">search</button> <div ng-repeat="searchContent in searchContents | filter:searchText"> <ul> <li> <h3 ng-bind-html="searchContent.title | highlight:searchText"></h3> <p ng-bind-html="searchContent.disc_1 | highlight:searchText"></p> <p ng-bind-html="searchContent.disc_2 | highlight:searchText"></p> </li> </ul> </div> </div> </div> </body> </html>
1 个解决方案
解决方案1
0 2015-12-15 21:55:35
以下是针对您的案例的非常具体的解决方案。 我在样式表中添加了一个名为hastext类，然后在段落<p>s周围向一个新的<div>添加了一个long ng-class指令
这很好，因为它利用您的高亮过滤器，将过滤后的文本与原始文本进行比较，如果存在差异（如果找到任何插入的<span>s ）则将其设置为true。 但是，如果添加更多段落，则还必须向该ng-class调用添加其他行。
var app = angular.module('app',['ngSanitize']); app.controller('searchCtrl',['$scope', function($scope){ $scope.searchContents = [ { title: 'Hedng one', disc_1: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.' }, { title: 'Heading tow', disc_1: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.', disc_2: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.', disc_3: 'lorem lorem lorem' }, { title: 'Heding three', disc_1: 'discription..............................................' }, { title: 'Heding four', disc_1: 'discription..............................................' } ]; }]); app.filter('highlight', function () { return function (text, search, caseSensitive) { if (text && (search || angular.isNumber(search))) { text = text.toString(); search = search.toString(); if (caseSensitive) { return text.split(search).join('<span class="ui-match">' + search + '</span>'); } else { return text.replace(new RegExp(search, 'gi'), '<span class="ui-match">$&</span>'); } } else { return text; } }; });
/* Generated by less 2.5.1 */ .ui-match { background: #FFC107; color: #fff; } .side-panel.panel-open { transform: translateX(0%); display: block; } .side-panel li { float: left; width: 100%; } .side-panel.side-panel-singlar { z-index: 10; } .search-results > ul { list-style: none; padding: 0; margin: 5%; } .search-results > li { line-height: 1.3em; } .paragraphs { height: 0; overflow-y: hidden; } .paragraphs.hastext { height: auto; }
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-sanitize.min.js"></script> <script type="text/javascript" src="js/script.js"></script> <link rel="stylesheet" type="text/css" href="js/style.css"> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div ng-app="app" ng-controller="searchCtrl"> <div class="side-panel-singla"> <input type="text" class="input-search" placeholder="Search..." ng-model="searchText" /> <button class="btn-search">search</button> <div ng-repeat="searchContent in searchContents" > <ul> <li> <h3 ng-bind-html="searchContent.title | highlight:searchText" ></h3> <div class="paragraphs" ng-class="{'hastext' : ((searchContent.title | highlight:searchText) != searchContent.title || (searchContent.disc_1 | highlight:searchText) != searchContent.disc_1 || (searchContent.disc_2 | highlight:searchText) != searchContent.disc_2 )}"> <p ng-bind-html="searchContent.disc_1 | highlight:searchText"></p> <p ng-bind-html="searchContent.disc_2 | highlight:searchText"></p> </div> </li> </ul> </div> </div> </div> </body> </html>
如何用多维数组列表突出显示AngularJs 1.4.8中的搜索文本？
[英]How to highlight the search text in AngularJs 1.4.8 with a multi-dimensional array list?
如何在AngularJS材质设计中创建简单的搜索输入文本？
[英]How to create a simple search input text in AngularJS material design?
使用Angular过滤器突出显示搜索结果并隐藏不匹配的文本？
[英]Highlight search result with Angular filter and hide non matching text?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.