Búsqueda de registros

Una funcionalidad interesante, pensando en el momento en el que la cantidad de registros sea importante, es la de poder acotar la lista de resultados con una cadena determinada. Esto nos permitirá localizar con mayor facilidad la película, en el caso que nos ocupa, en la que estamos interesados.

Para ello vamos a seguir unos pasos:

• Creamos una lista de resultados paralela que será el resultado de aplicar el filtro que corresponda. En el momento inicial, esta lista filtrada será igual a la lista total de registros:
  • peliculas_clave :Pelicula_clave[];
  • filtro_peliculas :Pelicula_clave[];
  • constructor(private ListarPeliculasService:ListarPeliculasService) {
  • this.peliculas_clave = [];
  • this.filtro_peliculas = [];
  • }
• A continuación generamos un campo de entrada de la cadena a buscar, y un botón para poner en marcha el filtrado:
  • <input class=»form-control form-control-lg» type=»text» placeholder=»Filtrar películas» #filtro>
  • <button class=»primary» type=»button» (click)=»filtrarPelis(filtro.value)»>Buscar</button>
• Al campo input le asignamos la variable «filtro» y el botón «Buscar» pone en marcha la función «filtrarPelis» con el parámetro del campo input
• Nos faltaría escribir la función de filtrado:
  • filtrarPelis(texto:string) {
    • if (!texto) {
    • this.filtro_peliculas = this.peliculas_clave;
    • return;
    • }
    • this.filtro_peliculas = this.peliculas_clave.filter(
    • Pelicula_clave => Pelicula_clave?.titulo.toLowerCase().includes(texto.toLowerCase())
    • );
  • }
• Lo que hacemos básicamente es igualar la salida filtrada al total de registros, para el caso de que no hayamos entrado ninguna cadena. Caso contrario, lanzamos un filtrado sobre el total de registros para quedarnos con los registros que incluyan la cadena entrada, siempre pasando las cadenas a minúsculas previamente.