Evento de teclado na guia pesquisar

17/02/2020

0

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

Responder

Posts

18/02/2020

Kleber Santos

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
Responder

18/02/2020

Renato Neto

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
Responder

18/02/2020

Kleber Santos

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.
Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar