Buscador en tiempo real con Javascript utilizando indexOf y Bootstrap 4.



https://i.ytimg.com/vi/NduleX-AC74/hqdefault.jpg



Curso Vue 2 + Firebase: http://curso-vue-js-udemy.bluuweb.cl

Hoy realizaremos una práctica utilizando vainilla Javascript, creando un rápido buscador en tiempo real para tus datos.

Documentación https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/indexOf

Suscríbete aquí: https://www.youtube.com/bluuweb
Descarga los archivos del curso aquí: https://goo.gl/4tZAZb

MÁS CURSOS DE BLUUWEB!
📌 HTML Y CSS: https://goo.gl/yoMdMZ
📌 JAVASCRIPT: https://goo.gl/hnQkog
📌 JQUERY: https://goo.gl/Ag7XsG
📌 CSS GRID: https://goo.gl/nR56pT
📌 VISUAL STUDIO CODE: https://goo.gl/cvu57R
📌 BOOTSTRAP 4: https://goo.gl/npezrj
📌 PHOTOSHOP: https://goo.gl/1C9k5n
📌 PSD A HTML: https://goo.gl/VYX2V6
📌 TEMAS WORDPRESS: https://goo.gl/GeiVNm
📌 PHP Y MYSQL: https://goo.gl/oao1QT
📌 FORMULARIOS CON PHP Y AJAX: https://goo.gl/GKpZAH
📌 ANGULAR: https://goo.gl/WJhtnC
📌 VUE.JS: https://goo.gl/QzLoFY
📌 FIREBASE/FIRESTORE: https://goo.gl/bpKL9i
📌 PHP LARAVEL: https://goo.gl/iAbPBy
📌 MATERIALIZE CSS: https://goo.gl/7pSFY5
📌 IONIC: https://goo.gl/RNGKTD
📌 SASS: https://goo.gl/ba7mEE
📌 PROGRAMACIÓN BÁSICA: https://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: https://www.facebook.com/bluuweb/

Finalmente visita mi sitio web: https://www.bluuweb.org

Original source


32 responses to “Buscador en tiempo real con Javascript utilizando indexOf y Bootstrap 4.”

  1. 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!!!

  2. 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.

  3. 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.

  4. 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!!

Leave a Reply