stackoom
  简体   繁体   中英

how to create search filter and text highlight in angularjs

 原文  2015-12-15 18:55:29  6   1    javascript/ jquery/ html/ css/ angularjs

Question

 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>
It's working fine as it is but I want some improvement in it my requirement is to show heading only by-default and when user start to search then if searched text fiend in paragraph it should be expand otherwise not expend fiddle demo is as this example but its using kendo I want it in angularjs please help

1 answers

solution1
 0  2015-12-15 21:55:35

What follows is a very specific solution for your case. I added class called hastext to the style sheet, and then I added an long ng-class directive to a new <div> around the paragraph <p>s

It's nice because it utilizes your highlight filter, comparing the filtered text to the original, and setting it to true if there's a difference (if it finds any of the inserted <span>s ). However, if you add more paragraphs, you will also have to add additional lines to that ng-class call. 

 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Highlight search text in the search results using angularJS filter how to highlight the search text in autocomplete? How to create filter in Angularjs? How to highlight the search text in AngularJs 1.4.8 with a multi-dimensional array list? How to filter/search/highlight columns in HTML table? AngularJS highlight search no result Angularjs Filter search starting with given text How to create a simple search input text in AngularJS material design? Highlight search result with Angular filter and hide non matching text? How do I create a search filter text box in Jquery?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM