import * as Mark from 'mark.js'; // For search highlighting
import * as scrollElmIntoView from 'scroll-into-view';
export class HomePage {
// Instance for Mark for higlighting search along with marked count
markInstance: any; // Instance/scope of search
markResults:any = []; // Total number marked results
currMarkIndx = -1; // Index of in view marked search result
searchString(){
// Search entered string from search bar
// Clear previous marked searches if any
this.clearMarkedMatches();
// Create variable for target(s) container
var responseArr = $('#target-elements');
var searchStr = this.searchField.content.trim(); // Current entered string
// Create Mark instance (using JavaScript object array instead of jQuery object array)
this.markInstance = new Mark(responseArr.toArray());
// Supply the string to search with options
this.markInstance.mark(searchStr);
// Find array of marked elements
this.markResults = responseArr.find('mark');
this.currMarkIndx = -1; // Reset the index counter
}
showCurrentMark(direction){
// Update index to highlight current mark
if(this.markResults.length){
if(direction == 'next'){
if(this.currMarkIndx == -1){
this.currMarkIndx = 0;
}
else{
this.currMarkIndx == this.markResults.length - 1 ? this.currMarkIndx = 0 : this.currMarkIndx++;
}
}
else if(direction == 'prev'){
if(this.currMarkIndx == -1){
this.currMarkIndx = this.markResults.length - 1;
}
else{
this.currMarkIndx == 0 ? this.currMarkIndx = this.markResults.length - 1 : this.currMarkIndx--;
}
}
this.scrollToSearched();
}
else{
this.presentToast('No result found.');
}
}
scrollToSearched(){
// Scroll and highlight mark
if(this.markResults.length){
var position,
currentMark = this.markResults.eq(this.currMarkIndx);
// Remove "current" class from all elements
this.markResults.removeClass('current');
if(currentMark.length){
currentMark.addClass('current');
// Scroll to currently higligted search
scrollElmIntoView(currentMark[0], { time: 250 });
}
}
else{
this.presentToast('No result found.');
}
}
clearMarkedMatches(){
// Clear all marked searches
return new Promise((resolve, reject)=>{
if(this.markInstance)
this.markInstance.unmark();
resolve();
})
}
}
Ok got it working when added jQuery (npm install jquery). For those who have the same question #target-ement would be the container element that holds the text to look into.
Thanks @sujit77!
I’m trying to use this code but I’m having a problem in this line
var searchStr = this.searchField.content.trim();
It’s saying that the searchField does not exist in the .ts
Can anyone help?
If you look at ion-searchbar in HTML, the ngModel point to searchField.content. This means that the searchField is an object type variable declared under the Component class, added below -
searchField = {
content: ""
};
Few more variables - this.presentToast is Ionic Tost. Also, to get target HTML elements, I am using jQuery in my code, you can use Angular elements or plain JavaScript document.querySelectorAll('#target-elements').
Seems like I forgot to mention that in my prior comment. I will update it accordingly.