1
00:00:00,350 --> 00:00:05,370
En este video vamos a comenzar a trabajar con lo que es el buscador este buscador que se puede decir

2
00:00:05,370 --> 00:00:11,520
que es como en vivo es decir si escribes algo por ejemplo Juan piés resultados que muestra dos si te

3
00:00:11,520 --> 00:00:19,400
pasas no hay nada está en cero o si regresas todo te muestra tres lo estaremos haciendo con JavaScript.

4
00:00:19,400 --> 00:00:22,840
Es la forma más fácil más eficiente de hacerlo.

5
00:00:23,220 --> 00:00:32,590
Aquí imput buscador va a ser igual al documento quieres ser lector y vamos a poner aquí.

6
00:00:32,720 --> 00:00:44,370
Además quiero revisar está en índex punto PHP más arriba dimos una idea de buscar buscar aquí un Tocoma

7
00:00:45,470 --> 00:00:52,470
y copiamos esta variable que vamos a crear se deben tener buscador input buscador punto de Vélez Zener

8
00:00:53,290 --> 00:00:58,910
y ya vimos por ejemplo dos tipos de Liz tener un submit cuando llenas el formulario usualmente es que

9
00:00:58,920 --> 00:01:04,470
vas a utilizar y cuando das clic en un elemento usualmente se va a utilizar click cuando tienes un campo

10
00:01:04,470 --> 00:01:10,410
de este tipo que es un input en el que escribes se utiliza entre muchos otros hay muchas opciones pero

11
00:01:10,410 --> 00:01:19,260
lo que más me gusta utilizar es imput y aquí vamos a poner buscar contactos vamos a crear esta variable

12
00:01:19,880 --> 00:01:26,250
que tenemos del formulario tenemos insertar actualizar y eliminar registros mostrar notificación tenemos

13
00:01:26,250 --> 00:01:36,870
distintas funciones o sea crear una nueva función buscar contactos y aquí voy a colocar Consort primero

14
00:01:36,870 --> 00:01:44,470
va a pasar un L.S. El evento y para mostrarte cómo funciona el imputs con punto y punto target punto

15
00:01:44,480 --> 00:01:47,650
valio 0.2 valio.

16
00:01:47,650 --> 00:01:54,490
De esta forma guardamos cambios abrimos la consola es este proyecto estamos trabajando actualmente con

17
00:01:54,500 --> 00:01:59,460
sol y cuando comencé a escribir pues ver que aparece y te reporta todo lo que escribas en esa parte.

18
00:01:59,460 --> 00:02:07,180
Por eso me gusta utilizar el imputara sus mensajes automáticamente en tiempo o en vivo por así decirlo

19
00:02:07,810 --> 00:02:08,720
en tiempo real.

20
00:02:09,740 --> 00:02:18,860
Aquí consta y vamos a hacerlo utilizando una expresión o la expresión o el Agnew explicó regula la expresión

21
00:02:19,760 --> 00:02:26,410
y vamos a pasarle y punto target apuntó valio sopesarlo estaforma.

22
00:02:26,430 --> 00:02:31,770
También voy a crear una segunda variable y por lo tanto quiero poner una coma y tenemos que decirle

23
00:02:31,770 --> 00:02:33,300
dónde va a buscar los registros.

24
00:02:33,300 --> 00:02:41,450
Por lo tanto hay que poner registros igualas document .40 el lector o en este caso porque queremos que

25
00:02:41,450 --> 00:02:47,170
traiga todos The Bodytech y entonces cada uno de los registros tiene su propio T.R.

26
00:02:47,180 --> 00:02:55,380
Por lo tanto en registros vamos a guardar todos los que haya aquí voy a colocar registros puntos for

27
00:02:55,450 --> 00:03:04,160
each al igual que en PHP el forista va a permitir recorrer un arreglo en registro aquí y utilizamos

28
00:03:04,160 --> 00:03:12,380
una función y en este caso vamos una vez que hacemos la búsqueda vamos a ocultar todos los registros

29
00:03:12,380 --> 00:03:24,290
del registro punto está el punto Display display va a ser non se va a ocultar todos en automático si

30
00:03:24,300 --> 00:03:29,180
guardas cambio si abres el proyecto a la hora de escribir todos se ocultan.

31
00:03:29,240 --> 00:03:33,900
Eso es lo que queremos hacer porque una vez se van a contar primero pero una vez que empiece a encontrar

32
00:03:33,900 --> 00:03:37,780
los registros vamos a cambiarlos de ocultos a mostrarlos.

33
00:03:37,800 --> 00:03:42,810
Para ello vamos a utilizar un NIF y vamos a poner registro punto Chae.

34
00:03:42,930 --> 00:03:52,170
No voy a mostrarte cómo va a funcionar esto que va a poner regista Consol Log Registro punto Chae no

35
00:03:54,040 --> 00:03:55,290
nos guardamos cambios.

36
00:03:55,420 --> 00:04:01,150
Abrimos el proyecto inspeccionar aquí para abrir la consola y voy a escribir aquí algo que me aparece

37
00:04:01,150 --> 00:04:04,540
una lista con muchos elementos.

38
00:04:04,540 --> 00:04:10,750
Por ejemplo de momento van a estar todos ocultos pero quiero mostrarte aquí por ejemplo este último

39
00:04:12,660 --> 00:04:18,820
si ya sé quién Tex van a aparecer los distintos textos que te vas a encontrar en algún lado aquí aparece

40
00:04:18,880 --> 00:04:27,050
Tex contén este es un espacio únicamente si tenemos el té de este pedido ver que dice Juan.

41
00:04:27,200 --> 00:04:31,820
Entonces esto es una forma a la que accedes a cada uno de los registros que es todo el tener todo el

42
00:04:31,820 --> 00:04:38,630
registro y en ese text contén vas a encontrar lo que es la información de lo que está dentro de cada

43
00:04:38,630 --> 00:04:41,030
uno de los registros ahora siempre.

44
00:04:41,060 --> 00:04:47,750
En este ejemplo que estamos construyendo siempre el nombre va a estar en el número 1 porque el primero

45
00:04:47,750 --> 00:04:54,280
es uno vacío y después el primero elemento que vamos a buscar siempre va a ser el nombre entonces para

46
00:04:54,280 --> 00:05:01,080
no estar buscando en todos aquí voy a filtrar para que únicamente me traigan los que estén en la posición

47
00:05:01,070 --> 00:05:03,130
1 9 cuenta.

48
00:05:03,150 --> 00:05:09,750
Voy a hacer una búsqueda desde el que me trae únicamente los textos de los que están en el 1 si quieres

49
00:05:09,870 --> 00:05:17,730
filtrar las empresas filtrar los teléfonos pues cambian además este número por 3 5 para cambiar los

50
00:05:17,730 --> 00:05:20,320
valores que están aquí en mi caso.

51
00:05:20,330 --> 00:05:27,510
Además quiero filtrar lo que son los nombres por lo tanto te voy a poner uno y ponemos punto text contén

52
00:05:27,840 --> 00:05:34,230
de Nueva cuenta se quiere poner text content contento te va a traer únicamente el texto puedes ver que

53
00:05:34,410 --> 00:05:39,020
le dejé registro punto chat Nobbs y me trae también el té.

54
00:05:39,030 --> 00:05:44,120
De esta forma nada más te va a traer lo que está en el contenido de cada uno de los registros y así

55
00:05:44,130 --> 00:05:50,040
es como puedes acceder al texto y aquí vamos a colocar un poco más de código.

56
00:05:50,040 --> 00:05:57,980
Voy a poner aquí punto replays más que nada porque este replays va a reemplazar cuando hay un espacio.

57
00:05:58,270 --> 00:06:04,370
Algunas personas tienen dos nombres como por ejemplo yo JuanPablo el espacio no lo va a encontrar.

58
00:06:04,620 --> 00:06:09,130
Si tenemos dos nombres este replays se va a encargar de eso.

59
00:06:09,290 --> 00:06:14,160
Diagonal Diagonal invertida como está como que se encuentren.

60
00:06:14,390 --> 00:06:23,150
Ese es una expresión también regular y decimos que lo reemplace con un espacio que ose poner en órbita

61
00:06:23,160 --> 00:06:29,320
lo estamos estaremos viendo y va a buscar la expresión que hemos creado del texto que estamos pasando

62
00:06:29,330 --> 00:06:34,760
el Olimpo va a ser la búsqueda va a tomar ese por ejemplo el nombre de la persona y va a compararlo

63
00:06:34,760 --> 00:06:41,420
entre cada uno de los text contén que tengamos finalmente que iba a ser igual a menos uno que no sea

64
00:06:41,420 --> 00:06:50,830
igual a menos uno porque si copiamos todo esto y lo pegamos aquí guardo cambios y recargamos puede ser

65
00:06:50,840 --> 00:06:53,090
que tengo un 3 que inician con uno.

66
00:06:53,090 --> 00:06:59,540
Este inicia con 1 2 supongo que uno no puede ser que 4 me dicen entró y uno me dice Fonds porque 4 inician

67
00:06:59,540 --> 00:07:09,870
con el 1 el otro si pongo Juan pues el que pongo J aparece 4 con Fox y uno como otros solamente nos

68
00:07:09,870 --> 00:07:12,560
interesa los que vengan como otro.

69
00:07:12,590 --> 00:07:18,960
Eso es lo que hace este código y Thera en cada uno de los nombres que hay aquí se ponen iterar en cada

70
00:07:18,960 --> 00:07:25,650
uno de los nombres por eso le pasamos Chainsaw 1 y los que encuentra que cumplen esta condición que

71
00:07:25,680 --> 00:07:30,680
tenemos aquí los filtra y los pasa como otro entonces.

72
00:07:30,750 --> 00:07:38,190
Esos registros pasarán de tener este display non a tener un display que en este caso porque es una tabla

73
00:07:38,190 --> 00:07:39,360
se va a ser Taiba el robo.

74
00:07:39,390 --> 00:07:49,530
Si fuera una lista dips lo pasaríamos tal vez a block recargamos y vamos a poner X Juan mi nombre y

75
00:07:49,530 --> 00:07:55,730
puedes ver que elimina los restos y nada más deja Juan si lo regresamos puedes ver que vuelve.

76
00:07:55,740 --> 00:08:02,700
Si pongo uno aparecen todos los que inician con 1 y los de 2 si pongo 2 los filtra y quita los anteriores.

77
00:08:02,700 --> 00:08:07,980
Entonces quiero mostrarte algunas más voy a cerrar esto ya esta parte de aquí ya no hace falta quitar

78
00:08:08,840 --> 00:08:19,470
si recargo aquí pongo un nombre con 2 o sea los nombres yo doy click en Añadir me crea el registro pues

79
00:08:19,480 --> 00:08:21,690
es el que tengo Juan y lo tengo Juan con espacio.

80
00:08:21,690 --> 00:08:28,230
Este espacio es lo que hace busca los espacios con una expresión regular y los reemplaza como un espacio.

81
00:08:28,230 --> 00:08:37,170
Si se lo quitas y recargas cuando busques Juan puedes ver que trae los dos pero cuando deja el espacio

82
00:08:37,170 --> 00:08:43,800
me quita ambos porque reemplaza el espacio con nada y por lo tanto pierde esa referencia el espacio

83
00:08:43,800 --> 00:08:49,800
que encuentra en el text contén en el DOM no es igual al que estamos aquí porque estamos pasándole que

84
00:08:49,800 --> 00:08:57,620
el espacio no debe tener nada eso es lo que hace este espacio aquí no retornamos aquí un espacio y lo

85
00:08:57,620 --> 00:09:01,010
pongo Pablo pues el que lo filtra correctamente.

86
00:09:01,010 --> 00:09:06,170
Muy importante es que si le pones aquí Juan todo mayúsculas no los va a encontrar.

87
00:09:06,170 --> 00:09:13,040
Tenemos que habilitar que sea cais inocencia que eso quiere decir más que nada que ignores si son mayúsculas

88
00:09:13,090 --> 00:09:18,500
minúsculas y que más bien se fijen los valores y eso lo haces aquí donde tenemos la expresión regular

89
00:09:19,770 --> 00:09:28,990
además la agregamos aquí voy a devolver el código entre comillas y minúscula y recargamos y por ejemplo

90
00:09:28,990 --> 00:09:35,460
puede ser que tengo Juan en mayúsculas y minúsculas todos lo escribo en mayúsculas funciona perfectamente.

91
00:09:36,060 --> 00:09:43,210
Entonces si quieres habilitar eso nada más poner la i y minúscula en este caso no es como que sea un

92
00:09:43,210 --> 00:09:46,190
código sencillo se ve complicado en realidad.

93
00:09:46,390 --> 00:09:49,320
La ventaja es que no es que tengas que memorizar este código.

94
00:09:49,330 --> 00:09:54,100
La idea de este proyecto es esa que almacenas el proyecto y que cuando ocupes habilitar un buscador

95
00:09:54,100 --> 00:10:00,040
como éste tengas ya un código que lo hace en el siguiente vídeo vamos a ver cómo mostrar la cantidad

96
00:10:00,040 --> 00:10:03,440
de contactos que tenemos así que lo veremos en el próximo video.