Buscador en tiempo real con Javascript utilizando indexOf y Bootstrap 4.
ฝัง
- เผยแพร่เมื่อ 16 ก.ย. 2024
- Curso Vue 2 + Firebase: curso-vue-js-ud...
Hoy realizaremos una práctica utilizando vainilla Javascript, creando un rápido buscador en tiempo real para tus datos.
Documentación developer.mozi...
Suscríbete aquí: / bluuweb
Descarga los archivos del curso aquí: goo.gl/4tZAZb
MÁS CURSOS DE BLUUWEB!
📌 HTML Y CSS: goo.gl/yoMdMZ
📌 JAVASCRIPT: goo.gl/hnQkog
📌 JQUERY: goo.gl/Ag7XsG
📌 CSS GRID: goo.gl/nR56pT
📌 VISUAL STUDIO CODE: goo.gl/cvu57R
📌 BOOTSTRAP 4: goo.gl/npezrj
📌 PHOTOSHOP: goo.gl/1C9k5n
📌 PSD A HTML: goo.gl/VYX2V6
📌 TEMAS WORDPRESS: goo.gl/GeiVNm
📌 PHP Y MYSQL: goo.gl/oao1QT
📌 FORMULARIOS CON PHP Y AJAX: goo.gl/GKpZAH
📌 ANGULAR: goo.gl/WJhtnC
📌 VUE.JS: goo.gl/QzLoFY
📌 FIREBASE/FIRESTORE: goo.gl/bpKL9i
📌 PHP LARAVEL: goo.gl/iAbPBy
📌 MATERIALIZE CSS: goo.gl/7pSFY5
📌 IONIC: goo.gl/RNGKTD
📌 SASS: goo.gl/ba7mEE
📌 PROGRAMACIÓN BÁSICA: goo.gl/HksyVi
¿Quiéres apoyar el canal?
Curso de Bootstrap 4 PREMIUM!
Accede con un súper descuento aquí:
curso-bootstrap-4-udemy.bluuweb.cl
También puedes seguirme en Facebook: / bluuweb
Finalmente visita mi sitio web: www.bluuweb.org --
Mi Setup:
⭐️ Teclado Mecánico: amzn.to/3Ns6fdK
⭐️ Audífonos: amzn.to/3pwrzqt
⭐️ Micrófono: amzn.to/3JH4tV7
⭐️ Monitor: amzn.to/3NTt8Iu
⭐️ Procesador: amzn.to/3raD4EC
⭐️ Tarjeta de Video: amzn.to/437t78b
![Git y Github: Curso desde cero [Tutorial en Español] #clasesConBluuweb](http://i.ytimg.com/vi/PW_A-lOpVV0/mqdefault.jpg)
![Git y Github: Curso desde cero [Tutorial en Español] #clasesConBluuweb](/img/tr.png)
![LocalStorage [Conceptos y definiciones] ❤ JAVASCRIPT ❤](http://i.ytimg.com/vi/7hR7oTpDukc/mqdefault.jpg)
![เขามัทรี - เอ็กซ์ ศุภกฤต - จอนนี่มิวสิค [ Official MV ]](http://i.ytimg.com/vi/AS9ufKuQIVs/mqdefault.jpg)
No necesitaba ver el video pero lo vi porque explicas como los dioses !!!
Sería excelente un ejemplo con registros de una base de datos. Gracias por el video.
En vez de utilizar el boton para buscar:
boton.addEventListener('click', filtrar);
Se puede utilizar el evento del input, para que a medida que uno vaya escribiendo vaya filtrando:
formulario.addEventListener('input', filtrar);
Creo que esta manera es mas practica.
Excelente video, saludos desde Argentina!!
Buena alternativa, pero mírate el vídeo completo, al final usa el evento upkey para que la función se ejecute con cada tecla pulsada :)
Hermano, muchas gracias por el tutorial, explicas muy bien y se siente mas agradable que cualquier profesor de mi universidad JAJA, me suscribo
Con esta maraviiishaaa de explicacion hice un buscador con data desde un JSON...Gracias!!!
😭😭😭 Excelente explicación, después de muchos años sin entender, aparece la mejor explicación......un abrazo muchas gracias
he he he 🎉🎉🎉
Alguien debería de darte un premio. Sos genial.
Pasan los dias y esta explicacion sigue funcionando. Gracias.
Te amo
Amigooooooooo me has salvado la vida, todo este tiempo he estado buscando formas de crear esto y por fin lo logro, además, he utilizado un poco de CSS además del Bootstrap para hacer la búsqueda más dinámica y bonita, *_gracias!_*
Gran canal, el mejor explicando junto con FAZT, espero crezcas bastante, acá un nuevo suscriptor. Un abrazo desde Lima Perú
Muchas gracias, por la ayuda, ahora mismo estoy empezando con javascript y me resulta bastante complicado, pero con tu ayuda lograre aprenderlo.
Excelente explicación. Espero que sigas subiendo mas explicaciones sobre Vue y en un futuro quizas hagas un curso de Nativescript con Vue. Gracias por compartir todos tus conocimientos, tienes una gran capacidad para explicar.
Vamos a estudiar Nativescript jijij nunca terminamos de aprender ajajaj
gracias bro, no sabes como me sirven tus cursos!! saludos desde Uruguay
Fenomenal!
Por mucho más ejemplos en Javascript! Gracias y saludos desde Brasil! :^)
Saludos a Brasil!!! si iré subiendo más ejercicios de Javascript :)
Amigo está increíble ya sólo de conectar a una base de datos y quedaría genial. Te felicito.
en el curso de vue de udemy vemos como trabajar con firebase :) Saludos y gracias por todo el apoyo!!
Muchas gracias, me salvaste la vida
Sos un maestro!!!
Justo lo que necesitaba, estaba probando con otros metodos con map y filter, pero el tuyo es mas "entendible"
gracias!!
Genial! de igual forma aplicaremos algo con filter :) Saludos!!
gracias Bluuuweb, te debo mucho
me super sirvio para mi carrito de compras
Gracias explicas muy bien y me encanta tu actitud!!
gracias por cada uno de tus videos!
Super bueno, me encantó este tutorial, me parece muy buena la pedagogía que utilizas para enseñar
Excelente muchas gracias por el apoyo
Eres un dios !!!!
También podría utilizarse .includes() , creo que sería incluso el código más corto, por qué este a comparación de .indexOf, no retorna la ubicación del texto, si no, retorna true o false
Te quiero! en serio... ya suscrita!! Eres genial
ERES UN CRACK!!!
Excelente, bien explicado y va al punto. Gracias.
Muchas gracias!! :)
Excelente, muy buen vídeo y muy buen instructor, te felicito y te doy muchas gracias por compartir este conocimiento que es muy valioso
gracias era lo q necesitaba :)
Excelente explicación , entendí mejor aquí que con otros cursos :3 como se podria extraer los datos de una base de datos ?
Genio, muchas gracias!
excelente explicacion
muchisimas gracias x el video! super claro!!!
muy buen video y excelente explicación, compre tu curso compa.
Excelente vídeo amigo muy bien explicado, muchas gracias saludos desde Venezuela. Te ganaste un like y un sub
Parce, que buen video... me sirvió mucho, te ganaste un suscriptor mas
Muchas gracias. Bien explicado ;-)
Saludos desde Vzla..
muchas gracias me sirvió mucho
Muy buenos tus tutoriales eres un crack
Muy bueno amigo y super bien explicado, me ayudo bastante . saludos!
Excelente tutorial me sirvio de mucho GRACIAS...!!!
Grande máquina, excelente forma de enseñar !
muchas gracias!! Saludos Esteban!
@@bluuweb consulta, no tienes un canal en dicord para la comunidad??
jajajajgenial y a prueba de weones!!!, muy divertida la narración la verdad. gracias!!
simplemente un genio
gracias amigo, que buen tuto
Muchas gracias muy bien explicado :-)
Bluu porfa haz un video de filtros de productos pero con elementos del html, por ejemplo un filtro de productos. Saludos
los productos por lo general llegan de una bd y pues se realiza la consulta y se precargan
como podria hacer uno asi pero con etiquetas que te aparesca para darle click la opcion y se lleve a su respectiva pagina ? ejemplo busco celulares y abajo me aparesca un recuadradito de celulares que al toar te lleve a ese apartado.
gracias desde ya
Me imagino usando para un diccionario digital. es decir hacer una web y filtrar palabras tipo buscador.
Excelente explicación! :D
En lugar de poner otro "if" podrías haber utilizado un "else" en el mismo if. Aún así, excelente explicación, me sirvió un montón n.n
me salvaste la vida locoooo xD gracias ! like!
fiesta!
¿como puedo darle estilos a los datos ? y como puedo hacer que solo aparesca la informacion cuando le de a buscar y si no hay la informacion diga que nose encuentra , te lo agradeceria.
Donde encuentro el archivo de descarga?
Hola. Muy interesante y practico lo que hiciste. Podrias explicar como acceder a los datos de la base. Resulta que tengo 6 campos de diferentes bases a las que necesito hacerlo. Desde ya, Gracias
seria excelente que enseñaras a como ocultar la lista de búsqueda y que al momento de escribir se vallan mostrando la lista al momento que escriba el usuario
Genioo muy bueno!
Me compartes el código amigo :(
Excelente! Qué pasa si quiero buscar por varios campos, es decir, "nombre, descripción"??
seria lo misno solo que en la condicion pondria if( nombre.indexOf(valor) !== -1) || ( descripcion.indexOf(valor) !== -1) y la busqueda seria por nombre y por descripcion.... saludes
una pregunta este metodo de busqueda lo puedo implementar con laravel?
Gran video
como se hace para seleccionar alguno de los registros que dan como resultado la busqueda y asignarlo a una variable
muy bueno!
como se hacen esas comillas?
Más videos por favor maestro.
uno pregunta se puede utilizar node js y morgan para hacer el buscador
master , prque al hacero en una tabla cmo la que usaste en crear persona, no muestra solo el regustro encontrado , le suma toda la tabla anterior, iluminame plis ....
Excelente broo. Saludos desde Perú. keep it up!. Solo una pregunta, ¿si podría ser posible que enseñes a crear el buscador como web component con js vanilla?
Primero en la clase
Bienvenido a la clase jiji Saudos Raul!!
brother y si quiero hacer con una base de datos.... se podría??
buenas, consulta, se puede aplicar esto a un datatable,Jquery sin necesidad de usar el que trae x defecto.. gracias
Una pregunta y si quiero que busque archivos PDF que tenga en una carpeta especifica, ¿como seria?
compañero yo ya tengo un json desplegado como hago para hacer ese filtro
Se puede consumir json externo en vez del array para separar el código y que quede todo mejor ordenado?
Una pregunta estoy trabajando con nodejs, y al hacer esto si puedo ver hacer la logica el script, pero n o se como hacer para tomar la lista de productos y transformarla en un arreglo, por que imprimo los producto en un index, pero no me el productos que es el resultado de una consulta, no me lo toma como arreglo en el script :/
11:50 Acento grave ``
Hola muy buenas tardes!!
Hay manera de aplicar lo mismo a una base de datos de firebase?
Muchas gracias por la enseñanza.
como puedo hacer esto en firebase
Excelente video, me quedo a la primera. Tengo una duda si quiero que al momento que ya me salio la fruta le pueda pulsar y me lleve a otra parte con href como le puedo hacer, espero me puedas ayudar.
veo que casi no contestas pero bueno de igual forma ya lo intente de muchas formas y no logro comprender como hacerle para que al encontrar el producto encontrado y dar click en el me mande a un enlace(abrir otra pagina) interno. ¿como se le hace para agregar enlaces a cada producto en el array? gracias por tu atencion
tengo una duda y cuando quiera darle clip y me direccione a otra ventana con el dato encontrado como lo aria
abajo explican como
hola buenas, tengo una pregunta. ¿Por que al llamar la funcion filtrar la primera vez entra en el if(nombre.indexOf(texto) !== -1) ?, si el valor de texto es nulo, y en el if pregunta si el texto va dentro del de nombre AYUDA!!!
Cómo podría evitar espacios en blanco si quiero buscar un nombre completo del array, por ejemplo tengo Pedro Palotes Zamora en el dato usuario.nombre
Es decir usando este ejemplo cuando le doy buscar sin tener nada escrito me escribe todos los usuarios del arreglo, como puedo resolver eso
hola, me da error cuando pongo : resultado.innerHTML =''; dice que no puede ser null, uffff
A mi también y no se porque
Hola si quiero que muestre la imagen asociada al producto se puede?
Cómo cambio el contenido a filtrar, osea "const productos" por todo el contenido de una página html? muchas gracias
Hola ignacio, de verdad muchas gracias por su video, tengo que comprar su curso de vue JS pero primero necesito aprender muy bien el JS. Le escribo por agradecerle por la explicación del tutorial.
Ignacio, tengo una pregunta. Lo que pasa es que yo tengo un proyecto con su respectivo CRUD. Todo funciona de maravilla. Es mas ya estoy que acabo para entregarlo, pero tengo una duda. Necesito que funcione el buscador y pues sigo el tutorial y cuando escribo cualquier cosa, la consola me lo vale, pero no se como insertar la conexión a la base de datos para que me lea los registros que tengo usando JS. Muchas gracias, que pena por la molestia.
Hola Ignacio, podrias realizar este ejercicio con vue js?
como puedo hacer para que cuando yo ponga una letra por ejemplo c me sale cundinamarca, pero cuando la borro me aparecen todos los recorridos, como se puede hacer para que cuando la borre siga estando vacio el espacio
Exelente, pero como puedo realizarlo con datos que tengo en un array de una base de datos, espero su respuesta, gracias.
Hola. Al hacer click en el botón, me muestra el producto buscado, pero al instante se actualiza la pagina. Que puede ser?
como seria para q no se active los productos cuando no estoy buscando?????.
holi muy bueno el vídeo tutorial me explico muchas cosas quisiera saber como se realizaron las "comillas especiales" que utilizaste en el resultado
alt + 96
@@nuditosmacrame8147 muchas gracias!!
como puedo hacer para que halla ese espacio entre el numero 8 y 9 para colocar el bootstrap? saludos
cuales son las comillas especiales que nopermiten escribir html ?
Hola, los datos a buscar se podran traer de una base de datos?
Chao
y qué tal si quiero mostrar datos de una Bd?
Oigan chicos y chicas... Si lo nesesitan ya me esforse haciendolo y si funciona. Se los dejaré aquí abajo para ahorrarles trabajo como este TH-camr Bluuweb ya lo hizo con nosotros 😉
Psd: con ese codigo pueden agregarle enlaces solo duplicando la variable "enlace" dentro de la constante "productos" y cambiando la "URL". Solo les faltará el html.
const productos = [
{enlace:'*Tu enlace', nombre: 'Platano', valor: 500},
{enlace:'*Tu enlace', nombre: 'Pera', valor: 500},
{enlace:'*Tu enlace', nombre: 'Sandia', valor: 500},
{enlace:'*Tu enlace', nombre: 'Melon', valor: 500},
{enlace:'*Tu enlace', nombre: 'Frutillas', valor: 500},
]
const formulario = document.querySelector('*Tu input del buscador');
const boton = document.querySelector('*Tu boton');
const resultado = document.querySelector('*Tu espacio para ubicar el resultado');
const filtrar = ()=>{
/*console.log(formulario.value);*/
resultado.innerHTML = '';
const texto = formulario.value.toLowerCase();
for(let producto of productos){
let nombre = producto.nombre.toLowerCase();
if(nombre.indexOf(texto) !== -1){
resultado.innerHTML += '' + producto.nombre + ' - valor:' + producto.valor + ''
}
}
if(resultado.innerHTML === ''){
resultado.innerHTML += ' Producto no encontrado ';
}
}
boton.addEventListener('click',filtrar);
formulario.addEventListener('keyup',filtrar);
filtrar();
Feliz noche y saludos a todos.
genio
pero se duplica el resultado al escribir lo que buscas y te genera doble enlace almenos a mi no me a logrado quedar