Evento de teclado na guia pesquisar

HTML

Angular

JavaScript

17/02/2020

Tenho uma tela, onde é carregado dados de um banco em um treeview ao lado esquerdo, onde, ao selecionar algum node é carregado o conteúdo do mesmo na div conteúdo, ao lado. Dentro da div conteúdo tenho um input text chamado pesquisa, que tem a finalidade de destacar a palavra digita no conteúdo. Até ai tudo bem, está funcionando, porém ao apagar a palavra digitada ou digitar uma palavra que não existe no conteúdo, é exibido o texto em html puro.

Tentei debugar pela ferramenta de desenvolvedor, inclui consoles e alerts para encontrar o evento de digitação da caixa de pesquisa, porém não encontrei. Parece que isto é feito de maneira assincrona encapsulado pelo componente que não dispara um evento e nem reinderiza a pagina. Dessa forma não consigo tratar.

Estou começando em angular agora e não sei como resolver isso. Será que poderiam me ajudar, por favor?
Renato Neto

Renato Neto

Curtidas 0

Respostas

Kleber Santos

Kleber Santos

17/02/2020

Poste o código desse input(caixa de pesquisa).

Talvez o onBlur possa ser útil para o teu caso, segue a documentação:
https://angular.io/guide/user-input#on-blur
GOSTEI 0
Renato Neto

Renato Neto

17/02/2020

Poste o código desse input(caixa de pesquisa).

Talvez o onBlur possa ser útil para o teu caso, segue a documentação:
https://angular.io/guide/user-input#on-blur


Obrigado pelo retorno Kleber,

Testei outros eventos e métodos, de fato o onBlur é acionado ao colocar o evento dentro do input, mas não necessariamente deveria ocorrer quando se perde o foco. Talvez se eu fizer uma gambi, se após apagar o conteúdo eu tiro o foco do elemento.

Segue trecho do código:

import { Component, OnInit, Input, OnChanges, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';
import { stringify } from 'querystring';

@Component({
  selector: 'ig-pesquisa',
  templateUrl: './pesquisa.component.html',
  styleUrls: ['./pesquisa.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class PesquisaComponent implements OnInit, OnChanges
{
  @ViewChild('dataContainer') dataContainer: ElementRef;
 
  ngOnChanges(changes: import("@angular/core").SimpleChanges): void {
    const txtidpesquisa = (<HTMLSelectElement>document.getElementById('pesquisa')).value;
    //console.log('idpesquisa: ' + idpesquisa);

    //debugger ;
    //console.log(changes);
    //alert('txtidpesquisa: ' + txtidpesquisa);
    console.log('RDN - 0: ngOnChanges -> pesquisa.component.ts');
    this.html = this.actualText;

    console.log('RDN: - 0.1: ngOnChanges -> ' + this.html)

    this.dataContainer.nativeElement.innerHTML = this.html;

    const divConteudo = document.getElementById('divConteudo');
    divConteudo.innerHTML = this.actualText;

    console.log('RDN - 1: ngOnChanges -> pesquisa.component.ts');
  }

  constructor(){

    console.log('RDN - 3: ngOnChanges -> pesquisa.component.ts');
  }

  @Input() html:string;
  @Input() actualText ='';
  @Input() conteudo: string;
  @Input() searchText: string;

  ngOnInit() {
    console.log('RDN - 2: ngOnInit -> pesquisa.component.ts' + this.actualText);
    //alert('Botão clicado!');
  }

  teste() {
    alert('teste');
 }

 /*
ngAfterContentInit(){alert('ngAfterContentInit');}
ngAfterContentChecked(){alert('ngAfterContentChecked');}
ngAfterViewInit(){alert('ngAfterViewInit');}
ngAfterViewChecked(){alert('ngAfterViewChecked');}
ngonDestroy(){alert('ngonDestroy');}
*/
}



<input  class="form-control mr-sm-2"
        type="text"
        name="search"
        placeholder="Pesquisar"
        aria-label="Search" 
        value="Highlight" [(ngModel)]="searchText"
        id="pesquisa"
>

<div #dataContainer
     id="divConteudo"
     ngxTextHighlight [content]=html
     [searchTerm]="searchText"
     [caseSensitive]="false">
</div>


Eu ainda tentei, colocar alguns logs e alerts mas não consegui identificar o momento em que é substituido o conteúdo da div que exibe os dados
GOSTEI 0
Kleber Santos

Kleber Santos

17/02/2020

Eu nunca usei esse ngx-text-highlight

Tente procurar nas documentações, pelo que entendi ele está manipulando o DOM.
Segue abaixo algumas documentações que podem te ajudar:
https://github.com/mraghuram3/ngx-text-highlight/issues/1
https://mraghuram3.github.io/#/ngx-text-highlight
https://github.com/mmounirf/ngx-text-highlighter

Procure na busca do GitHub por trechos de código, eu particularmente sempre acho algum projeto publico para servir de exemplo.
GOSTEI 0
POSTAR