Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Limpar caixa de pesquisa não atualiza Filter

Estou com uma dúvida a respeito de um problema que encontrei e não foi abordado no curso.

Eu fiz ele inteiro e consegui concluir com sucesso, no entanto ficou essa dúvida sem resolver.

Vamos lá no caixa de pesquisa search quando vai digitando ele vai aplicando o filtro e quando vai apagando a mesma coisa, no entanto, se você clicar no botão limpar, (X), que aparece no input, colocado pelos browsers modernos, ele limpa o input mas não dispara o evento** keyup** o que faz sentido, mas nesse caso ele não refaz a pesquisa considerando todos as fotos e isso fica estranho.

Tentei resolver com o change para refazer o filtro e pesquisar, mas esse só é disparado no lostfocus e por isso não teve o efeito desejado.

Como faço para que ao clicar no botão limpar do navegador ele refaça o filtro.

Se puderem me ajudar,

Obrigado.

3 respostas

Fala ai Danillo, tudo bem? Nesse caso você pode tentar utilizar o oninput.

Espero ter ajudado.

Oi infelizmente não deu certo.

Eu vi que consegui usar o oninput com alert

oninput="alert('teste')"

Mas quando tento usar ele com o debounce ele não funciona..

 <input 
            class="rounded" 
            type="search" 
            placeholder="search..." 
            autofocus
            (keyup)="debounce.next($event.target.value)"            
            (oninput)="debounce.next($event.target.value)"            
            [value]="value">

O meu Component está da seguinte forma.

import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { Subject } from 'rxjs';
import { debounceTime, filter } from 'rxjs/operators';

@Component({
    selector: 'ap-search',
    templateUrl: './search.component.html'
})
export class SearchComponent implements OnInit, OnDestroy {
    @Output() onTyping = new EventEmitter<string>();
    @Input() value: string = '';

    debounce: Subject<string> = new Subject<string>();

    ngOnInit(): void {
        this.debounce
            .pipe(debounceTime(300))
            .subscribe(filter => this.onTyping.emit(filter));
    }

    ngOnDestroy(): void {
        this.debounce.unsubscribe();
    }
}

Como poderia fazer esse código funcionar da mesma forma que o keyup funciona.

solução!

Fala ai Danillo, tudo bem? Nesse caso seria apenas input e não oninput, ficando (input).

Ou você pode tentar utilizar o change, ficando: (change).

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software