Search text and navigate -Chrome alike feature with marker locations using Angular
Tags: javascript, angular, webdev
Published: 2022-01-23 03:45:18

Photo by <a href="https://unsplash.com/@aaronburden?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Aaron Burden</a> on <a href="https://unsplash.com/s/photos/highlight-webite?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

Hi All, this post is in continuation with my last post in which we have learned how to highlight text from user input, if you haven't read that you can refer to it at [https://dev.to/this-is-angular/search-and-highlight-text-feature-using-angular-l98](https://dev.to/this-is-angular/search-and-highlight-text-feature-using-angular-l98) as it is our starting part of today's task where we will make Chrome alike search and navigate feature.

Our basic code will remain the same, now we will have a bar on the right on which we will show the location as per scroller for helping to move to highlighted text from scroll bar also with arrows to navigate between those. Let us make 1 marker bar on the right side based upon the container height the location from the top, which we can get as below
```javascript
marker height: number = 0;
markerTop: number = 0;
@ViewChild('textContainer') textContainer!:ElementRef;

ngAfterContentInit(): void {
    setTimeout(() => {
      const textContainerRect =
        this.textContainer.nativeElement.getBoundingClientRect();
      this.markerHeight = textContainerRect.height;
      this.markerTop = textContainerRect.top;
    }, 100);
  }

```
```html
<div *ngIf="markerHeight>0 &&markerTop>0 " class="marker" [ngStyle]="{'height':markerHeight+'px','top':markerTop+'px'}" ></div>
```
Now what we have on the screen is 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aeizo3xzkfh1s8s4dtnh.png)

So now we will find a way to get the location of the highlighted text based upon the class which we attached to each highlighted text which is highlighted-text in our case, which you can choose as per your choice. We will build a function that we can call after highlights are done and save the location in an array with which we can make the ticks on the bar. 
```javascript
getMarkerTicks() {
    setTimeout(() => {
    
      this.searchElements =
        this.textContainer.nativeElement.querySelectorAll('.highlighted-text');
      const markerTicks = this.searchElements.forEach((element: any) => {
        

        this.markerTicks.push(
          (this.markerHeight / this.scrollHeight) *
            element.getBoundingClientRect().top
        );
      });
      this.activeIndex = 1;

      this.textContainer.nativeElement
        .querySelectorAll('.highlighted-text')[0]
        .scrollIntoView({ block: 'center', behavior: 'smooth' });
    }, 100);
  }
```
And corresponding to it we can have html to create ticks as per number of highlights we have.
```html
    <div class="markersTicks" *ngFor="let m of markerTicks" [ngStyle]="{'top':m+'px'}" ></div>

```
We need now the way to show total number of highlights and navigator buttons, for which i will use disabled input and 2 arrow buttons.
```html
  <input class="input-navigator" type="text" disabled value="{{ activeIndex + ' of '+  markerTicks.length}}" >
    <div class="nav-btns">
      <img class="nav-btn" (click)="moveToNext()" src="../assets/down-arrow.png" alt="">
      <img  class="nav-btn" (click)="moveToBack()"  src="../assets/up-arrow.png" alt="">
    </div>
```
For buttons functionality we need to have functions to perform the said actions
```javascript
moveToNext() {
    const highlightedSpans =
      this.textContainer.nativeElement.querySelectorAll('.highlighted-text');
    if (highlightedSpans.length > 0) {
      if (this.activeIndex === highlightedSpans.length) {
        this.activeIndex = 0;
      }
      this.activeIndex++;

      this.searchElements[this.activeIndex - 1].focus();

    }
  }
  moveToBack() {
    const highlightedSpans =
      this.textContainer.nativeElement.querySelectorAll('.highlighted-text');

    if (highlightedSpans.length > 0) {
      if (this.activeIndex === 1) {
        this.activeIndex = highlightedSpans.length + 1;
      }
      this.activeIndex--;
      this.searchElements[this.activeIndex - 1].focus();
    }
  }
```
Now we are done with a fully functional app for searching and navigating between them.
![done screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tb78x93s4ygrqaitdvo1.png)
Full code can be found at [GitHub](https://github.com/nikhild64/highlight-text-navigator).
You can play with it on [https://nikhild64.github.io/highlight-text-navigator/](https://nikhild64.github.io/highlight-text-navigator/) 

If you liked it please share it with your friends or if any suggestions reach me out on [Twitter](https://twitter.com/nikhild64) or comment below.
Till next time Happy Learning!