SearchBar en Ionic – Qué es y cómo lo podemos usar

SearchBar en Ionic – Qué es y cómo lo podemos usar
5 (100%) 2 votes

En el capítulo de hoy vamos a hablar de uno de los componentes más rebuscados de Ionic y que me encanta. Se trata de la Searchbar, un componente sencillo y con poca configuración que se puede colocar en la parte inferior de la pantalla (o la superior) y que nos sirve para hacer búsquedas en el contenido de nuestra app. Yo, por ejemplo, lo utilizo en una aplicación de eventos que tengo en propiedad y también lo podéis ver en gran parte de las App-Commerce para buscar los productos. ¡Al lio!

Search Bar Ionic

Eyyy muy buenas lector/a guapos ambos. ¿Qué tal estás? ¡Cuánto tiempo sin vernos por aquí eh! La verdad que ya tenía ganas de ponerme a los mandos del blog otra vez. Me disculpo por el tema del tiempo, es bastante complicado en mi vida, pero siempre saco un ratito para dedicártelo a ti, mi usuario. Antes de seguir, me gustaría que te pasases por este enlace. Se trata del círculo y es una comunidad que estoy elaborando alrededor de esta disciplina. Seguro que no te arrepientes J

Bueno, saliendo ya de las presentaciones y mis movidas, vamos con lo que interesa, La SearchBar 3,2,1…. ¡Adelante mis valientes!

 

Y bien, ¿Qué es un SearchBar y cómo se usa?

Si has leído desde el principio, una SearchBar se trata de la típica barra de búsqueda que podemos ver en varias aplicaciones, sobre todo en los App-Commerce, para buscar contenido dentro de la aplicación.

Nota: Un SearchBar es un <ion-input> pero con proteínas. Digamos que es un componente que hereda de un Ion Input (como casi todos) y se ajusta a las necesidades de un buscador.

Pero antes de continuar veamos un ejemplo de cómo agregar uno a nuestros proyectos:

 

<ion-searchbar

  [(ngModel)]="miBuscador"

  [showCancelButton]="miStringDeCancell"

  (ionInput)="onInput($event)"

  (ionCancel)="onCancel($event)">

</ion-searchbar>

 

¿Habéis visto que sencillo es usarlo? Con esto ya tendríamos suficiente. Ya tendríamos un SearchBar funcional. Ale, adiós, nos vemos en el siguiente artículo. Noooo, que va hombre/mujer, este sitio es pro. Y como es pro, vamos a desgranar un poco más el módulo.

 

Las propiedades principales de un SearchBar o Ion Search

Animated -> boolean -> Si es verdad, activa la animación de la barra de búsqueda.

Autocomplete -> string -> Posibles: “On” y “Off” -> Activa o desactiva el autocompletar de nuestro buscador -> Por defecto: “Off”

Autocorrect -> string -> Posibles: “On” y “Off” -> Activa o desactiva el auto corrector de nuestro componente -> Por defecto: “Off”

cancellButtonText -> string -> Fija el texto que vamos a poner en el botón de cancelar.

Debounce -> number -> Fija el tiempo que pasa desde que se hace el primer tap sobre el buscador hasta que empieza a funcionar. La medida se hace en milisegundos.

Placeholder – > string -> Simplemente, como en un input normal, es el hint (consejo) que aparecerá antes de empezar a escribir.

showCancelButton -> bolean -> Muestra, o no, el botón de cancelar. Por defecto: False

SpellCheck -> string|boolean -> Establece la revisión ortográfica en nuestra entrada.

Type -> string -> Fija el tipo de entrada que va a tener nuestro componente.

  • Text
  • Password
  • Email
  • Number
  • Search
  • Tel
  • Url

Nota: Este componente puede ser para otros fines, no solo la búsqueda, por eso cuenta con la propiedad Type.

Por defecto: Search.

 

Ahora los eventos de entrada de usuario

ionCancell -> Este evento se dispara cuando el usuario a pulsado sobre el botón cancelar.

ionClear -> Este evento se dispara cuanto el usuario ha pulsado sobre el botón de limpiar.

ionInput -> Este evento se dispara cuando el usuario introduce valores dentro de nuestra caja de búsqueda.

 

Diferencia entre versiones Ionic 1 y Ionic 2, 3…

ionic 1 vs ionic 2

Aunque es lógico, y más desde la reescritura del core de Angular para pasar de la versión 1 a la 2. La mayoría de los componentes han cambiado. Esto no me cansaré de decirlo. A mi, personalmente, sobre todo en temas de rendimiento, no me gusta para nada Angular 1 (Es la base de Ionic 1) en comparación con el resto de versiones. Básicamente por que se programa en JS en lugar de TS y, como he dicho antes, el rendimiento.

La razón principal por la que cambia, es por el uso del HTML. Recordamos que Ionic en su primera versión no disponía ni de la mitad de posibilidades, dentro del htm sobre todo, de las que dispone ahora Ionic 2 y versiones superiores.

Es más, este componente en la versión 1 del FW aún no estaba disponible. Así que si queremos usar algo así en nuestro proyecto en Ionic 1 tendrémos que programarlos nosotros desde 0, con lo que ello conlleva.

Search Bar animation ¿Cómo lo hago?

Continuamos hablando del componente, ahora vamos a ver cómo podemos animar nuestro módulo con los principios de diseño de Material Dessing.

Antes, en la sección de propiedades, no la hemos visto por que se trata de una propiedad heredada. Y como dije, estas no las veremos en cada uno de los tutoriales.

Pero para este fin tenemos una opción muy sencilla de utilizar y que va a quedar genial. Se trata de la propiedad “animated”. Pero antes de continuar vamos a ver un ejemplo:

 

<ion-searchbar [animated]="true" [showCancelButton]="false">
</ion-searchbar>

En realidad no hay mucho que explicar. Sencillamente que esta propiedad por defecto viene seteada en false y lo unico que tenemos que hacer es cambiarla y ponerla en true para que sea nuestra super search bar animada 🙂

¿A qué es sencillo? Además cuando lo uses queda expectacular.

 

¿Y el autofocus?, ¿es posible usarlo en Ionic Search Bar?

Muchos me habéis preguntado que si es posible usar esta propiedad en la barra de búsqueda. A lo que siempre respondo lo mismo, y por eso he decidido meterlo aquí.

La respuesta corta es nop, lo siento si esperabas otra cosa.

La respuesta larga es: No por que este sistema da problemas en el crosh platform. Al no tratarse de un input normal y de no ir envuelto por un ion-item, no se puede controlar todo lo bien que se desearía esta propiedad. Con lo cual, por lo menos de momento, han decidido no usarla en esta versión.

Aunque, y como digo siempre, no, no es un no rotundo. Siempre puedes heredar el código de ion-search y tratar de hacerlo por ti mismo si es lo que estás buscando 🙂

 

Y…., el regalito que no podía faltar

Bueno lector, ahora sí, pues hasta aquí el contenido de hoy. Espero que te haya sido lo suficientemente útil y que te haya resuelto tus problemas. Si ha sido así me gustaría, si no lo has hecho ya, que te pases por el círculo y le eches un ojo. Seguro que no te arrepentirás. Un saludo y nos vemos en el siguiente artículo.

Comparte esto en: