En este video vamos a comenzar a trabajar con lo que es el buscador este buscador que se puede decir
que es como en vivo es decir si escribes algo por ejemplo Juan piés resultados que muestra dos si te
pasas no hay nada está en cero o si regresas todo te muestra tres lo estaremos haciendo con JavaScript.
Es la forma más fácil más eficiente de hacerlo.
Aquí imput buscador va a ser igual al documento quieres ser lector y vamos a poner aquí.
Además quiero revisar está en índex punto PHP más arriba dimos una idea de buscar buscar aquí un Tocoma
y copiamos esta variable que vamos a crear se deben tener buscador input buscador punto de Vélez Zener
y ya vimos por ejemplo dos tipos de Liz tener un submit cuando llenas el formulario usualmente es que
vas a utilizar y cuando das clic en un elemento usualmente se va a utilizar click cuando tienes un campo
de este tipo que es un input en el que escribes se utiliza entre muchos otros hay muchas opciones pero
lo que más me gusta utilizar es imput y aquí vamos a poner buscar contactos vamos a crear esta variable
que tenemos del formulario tenemos insertar actualizar y eliminar registros mostrar notificación tenemos
distintas funciones o sea crear una nueva función buscar contactos y aquí voy a colocar Consort primero
va a pasar un L.S. El evento y para mostrarte cómo funciona el imputs con punto y punto target punto
valio 0.2 valio.
De esta forma guardamos cambios abrimos la consola es este proyecto estamos trabajando actualmente con
sol y cuando comencé a escribir pues ver que aparece y te reporta todo lo que escribas en esa parte.
Por eso me gusta utilizar el imputara sus mensajes automáticamente en tiempo o en vivo por así decirlo
en tiempo real.
Aquí consta y vamos a hacerlo utilizando una expresión o la expresión o el Agnew explicó regula la expresión
y vamos a pasarle y punto target apuntó valio sopesarlo estaforma.
También voy a crear una segunda variable y por lo tanto quiero poner una coma y tenemos que decirle
dónde va a buscar los registros.
Por lo tanto hay que poner registros igualas document .40 el lector o en este caso porque queremos que
traiga todos The Bodytech y entonces cada uno de los registros tiene su propio T.R.
Por lo tanto en registros vamos a guardar todos los que haya aquí voy a colocar registros puntos for
each al igual que en PHP el forista va a permitir recorrer un arreglo en registro aquí y utilizamos
una función y en este caso vamos una vez que hacemos la búsqueda vamos a ocultar todos los registros
del registro punto está el punto Display display va a ser non se va a ocultar todos en automático si
guardas cambio si abres el proyecto a la hora de escribir todos se ocultan.
Eso es lo que queremos hacer porque una vez se van a contar primero pero una vez que empiece a encontrar
los registros vamos a cambiarlos de ocultos a mostrarlos.
Para ello vamos a utilizar un NIF y vamos a poner registro punto Chae.
No voy a mostrarte cómo va a funcionar esto que va a poner regista Consol Log Registro punto Chae no
nos guardamos cambios.
Abrimos el proyecto inspeccionar aquí para abrir la consola y voy a escribir aquí algo que me aparece
una lista con muchos elementos.
Por ejemplo de momento van a estar todos ocultos pero quiero mostrarte aquí por ejemplo este último
si ya sé quién Tex van a aparecer los distintos textos que te vas a encontrar en algún lado aquí aparece
Tex contén este es un espacio únicamente si tenemos el té de este pedido ver que dice Juan.
Entonces esto es una forma a la que accedes a cada uno de los registros que es todo el tener todo el
registro y en ese text contén vas a encontrar lo que es la información de lo que está dentro de cada
uno de los registros ahora siempre.
En este ejemplo que estamos construyendo siempre el nombre va a estar en el número 1 porque el primero
es uno vacío y después el primero elemento que vamos a buscar siempre va a ser el nombre entonces para
no estar buscando en todos aquí voy a filtrar para que únicamente me traigan los que estén en la posición
1 9 cuenta.
Voy a hacer una búsqueda desde el que me trae únicamente los textos de los que están en el 1 si quieres
filtrar las empresas filtrar los teléfonos pues cambian además este número por 3 5 para cambiar los
valores que están aquí en mi caso.
Además quiero filtrar lo que son los nombres por lo tanto te voy a poner uno y ponemos punto text contén
de Nueva cuenta se quiere poner text content contento te va a traer únicamente el texto puedes ver que
le dejé registro punto chat Nobbs y me trae también el té.
De esta forma nada más te va a traer lo que está en el contenido de cada uno de los registros y así
es como puedes acceder al texto y aquí vamos a colocar un poco más de código.
Voy a poner aquí punto replays más que nada porque este replays va a reemplazar cuando hay un espacio.
Algunas personas tienen dos nombres como por ejemplo yo JuanPablo el espacio no lo va a encontrar.
Si tenemos dos nombres este replays se va a encargar de eso.
Diagonal Diagonal invertida como está como que se encuentren.
Ese es una expresión también regular y decimos que lo reemplace con un espacio que ose poner en órbita
lo estamos estaremos viendo y va a buscar la expresión que hemos creado del texto que estamos pasando
el Olimpo va a ser la búsqueda va a tomar ese por ejemplo el nombre de la persona y va a compararlo
entre cada uno de los text contén que tengamos finalmente que iba a ser igual a menos uno que no sea
igual a menos uno porque si copiamos todo esto y lo pegamos aquí guardo cambios y recargamos puede ser
que tengo un 3 que inician con uno.
Este inicia con 1 2 supongo que uno no puede ser que 4 me dicen entró y uno me dice Fonds porque 4 inician
con el 1 el otro si pongo Juan pues el que pongo J aparece 4 con Fox y uno como otros solamente nos
interesa los que vengan como otro.
Eso es lo que hace este código y Thera en cada uno de los nombres que hay aquí se ponen iterar en cada
uno de los nombres por eso le pasamos Chainsaw 1 y los que encuentra que cumplen esta condición que
tenemos aquí los filtra y los pasa como otro entonces.
Esos registros pasarán de tener este display non a tener un display que en este caso porque es una tabla
se va a ser Taiba el robo.
Si fuera una lista dips lo pasaríamos tal vez a block recargamos y vamos a poner X Juan mi nombre y
puedes ver que elimina los restos y nada más deja Juan si lo regresamos puedes ver que vuelve.
Si pongo uno aparecen todos los que inician con 1 y los de 2 si pongo 2 los filtra y quita los anteriores.
Entonces quiero mostrarte algunas más voy a cerrar esto ya esta parte de aquí ya no hace falta quitar
si recargo aquí pongo un nombre con 2 o sea los nombres yo doy click en Añadir me crea el registro pues
es el que tengo Juan y lo tengo Juan con espacio.
Este espacio es lo que hace busca los espacios con una expresión regular y los reemplaza como un espacio.
Si se lo quitas y recargas cuando busques Juan puedes ver que trae los dos pero cuando deja el espacio
me quita ambos porque reemplaza el espacio con nada y por lo tanto pierde esa referencia el espacio
que encuentra en el text contén en el DOM no es igual al que estamos aquí porque estamos pasándole que
el espacio no debe tener nada eso es lo que hace este espacio aquí no retornamos aquí un espacio y lo
pongo Pablo pues el que lo filtra correctamente.
Muy importante es que si le pones aquí Juan todo mayúsculas no los va a encontrar.
Tenemos que habilitar que sea cais inocencia que eso quiere decir más que nada que ignores si son mayúsculas
minúsculas y que más bien se fijen los valores y eso lo haces aquí donde tenemos la expresión regular
además la agregamos aquí voy a devolver el código entre comillas y minúscula y recargamos y por ejemplo
puede ser que tengo Juan en mayúsculas y minúsculas todos lo escribo en mayúsculas funciona perfectamente.
Entonces si quieres habilitar eso nada más poner la i y minúscula en este caso no es como que sea un
código sencillo se ve complicado en realidad.
La ventaja es que no es que tengas que memorizar este código.
La idea de este proyecto es esa que almacenas el proyecto y que cuando ocupes habilitar un buscador
como éste tengas ya un código que lo hace en el siguiente vídeo vamos a ver cómo mostrar la cantidad
de contactos que tenemos así que lo veremos en el próximo video.