Closed UlisesGascon closed 6 years ago
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Datos buscador</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <style> html { position: relative; min-height: 100%; } body { padding-top: 160px; margin-bottom: 60px; } #no-encontrado { margin-top: 100px; } #img-hombre { display: block; margin-left: auto; margin-right: auto; } #img-cargando { max-width: 800px; display: block; margin-top: 0; margin-left: auto; margin-right: auto; } .panel { min-height: 380px; } #row-contenido { margin-top: 30px; } #error-ajax { display: none; } #campo-buscador { width: 350px; } #cargando { float: none; margin: auto; display: none; } .caratula-disco { width: 130px; } .col-centered { float: none; margin: 0 auto; } .footer { position: absolute; bottom: 0; width: 100%; height: 40px; background-color: #191414; } #owm-logo { padding-top: 5px; max-height: 35px; } .panel { color: #fff; background-color: #191414; min-height: 0px; } </style> <style> .magia:hover { color:white; background-color: black; } .magia2:hover { color:white; background-color: red; } </style> </head> <body> <div class="container"> <!-- ALERT EN CASO DE ERROR --> <div class="alert alert-dismissible alert-danger" id="error-ajax"> <button type="button" class="close" data-dismiss="alert">x</button> <strong>Oh Error!</strong> Error al cargar los datos de <a href="http://omdbapi.com/" target="_blank" class="alert-link">OMBD - </a> </div> <!-- EL BUSCADOR--> <div class="row" id="row-buscador"> <div class="col-md-12" id="col-buscador"> <h3 class="text-center">Descubre más sobre tus amigos....</h3> <div class="input-group col-centered" id="campo-buscador"> <input type="text" id="input-usuario" class="form-control" placeholder="Tu película favorita..."> </div> </div> </div> <div class="row" id="row-contenido"> <!-- AQUI VA LA PELICULA --> </div> <!-- ANIMACION DE CARGA--> <div class="row" id="cargando"> <div class="col-md-12 col-centered"> <img id="img-cargando" src="http://ilcmemphis.org/wp-content/uploads/2016/09/Stick-figure-flipping.gif"> </div> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script> <script> /* https://www.json-generator.com/# [ '{{repeat(45, 50)}}', { _id: '{{objectId()}}', name: '{{firstName()}} {{surname()}}', gender: '{{gender()}}', company: '{{company().toUpperCase()}}', email: '{{email()}}' } ] */ var data = [ { "_id": "5b47950280b132433c30b515", "name": "Barry Stein", "gender": "male", "company": "VIRVA", "email": "barrystein@virva.com" }, { "_id": "5b4795020b4aebf720f6a09a", "name": "Audrey Coffey", "gender": "female", "company": "ZIALACTIC", "email": "audreycoffey@insuresys.com" }, { "_id": "5b479502572b786a80acf969", "name": "Lindsay Lowery", "gender": "male", "company": "PRIMORDIA", "email": "lindsaylowery@primordia.com" }, { "_id": "5b47950203dc40343da6702c", "name": "Ora Duffy", "gender": "female", "company": "ZENOLUX", "email": "oraduffy@zenolux.com" }, { "_id": "5b479502114cef727da9c478", "name": "Alyson Decker", "gender": "female", "company": "UNISURE", "email": "alysondecker@unisure.com" }, { "_id": "5b4795024b97ae1c64846cce", "name": "Kelley House", "gender": "female", "company": "OBONES", "email": "kelleyhouse@obones.com" }, { "_id": "5b479502ee15c286d7c25e1d", "name": "Geraldine Walls", "gender": "female", "company": "SURETECH", "email": "geraldinewalls@suretech.com" }, { "_id": "5b4795026e2c2e357a53eb56", "name": "Schmidt Parks", "gender": "male", "company": "NETUR", "email": "schmidtparks@netur.com" }, { "_id": "5b479502f0bf69820b579def", "name": "Aurelia Hunter", "gender": "female", "company": "LUMBREX", "email": "aureliahunter@lumbrex.com" }, { "_id": "5b4795020699a53404347536", "name": "Nolan Mccall", "gender": "male", "company": "SIGNIDYNE", "email": "nolanmccall@signidyne.com" }, { "_id": "5b479502d1b97d49a217ce47", "name": "Sally Doyle", "gender": "female", "company": "EXOTERIC", "email": "sallydoyle@exoteric.com" }, { "_id": "5b479502696977d6957f7e0c", "name": "Middleton Kramer", "gender": "male", "company": "NIXELT", "email": "middletonkramer@nixelt.com" }, { "_id": "5b479502d3b68b75ac3fccdb", "name": "Sykes Salas", "gender": "male", "company": "XPLOR", "email": "sykessalas@xplor.com" }, { "_id": "5b4795026797105d22766746", "name": "Edwina Drake", "gender": "female", "company": "PROSURE", "email": "edwinadrake@prosure.com" }, { "_id": "5b47950250dea8fa1933e649", "name": "Louise Summers", "gender": "female", "company": "PIGZART", "email": "louisesummers@pigzart.com" }, { "_id": "5b479502b213905d1283e476", "name": "Hillary Hancock", "gender": "female", "company": "COMVOY", "email": "hillaryhancock@comvoy.com" }, { "_id": "5b47950268dbeb044eb814b6", "name": "Clayton Roach", "gender": "male", "company": "LUXURIA", "email": "claytonroach@luxuria.com" }, { "_id": "5b4795028b7f94ba1945a354", "name": "Donna Wade", "gender": "female", "company": "QUANTALIA", "email": "donnawade@quantalia.com" }, { "_id": "5b4795025e84e0af5da2053d", "name": "Lancaster Small", "gender": "male", "company": "UXMOX", "email": "lancastersmall@uxmox.com" }, { "_id": "5b479502a0d1b6dce4f39260", "name": "Silvia Howe", "gender": "female", "company": "HALAP", "email": "silviahowe@halap.com" }, { "_id": "5b479502fc337faf1a44a70a", "name": "Amalia Chan", "gender": "female", "company": "EMTRAC", "email": "amaliachan@emtrac.com" }, { "_id": "5b479502941022cc4d947fba", "name": "Evangelina Ortiz", "gender": "female", "company": "ZAGGLES", "email": "evangelinaortiz@zaggles.com" }, { "_id": "5b47950282ac6a5a5727411f", "name": "Landry Kline", "gender": "male", "company": "LUDAK", "email": "landrykline@ludak.com" }, { "_id": "5b4795024951e765f9def12a", "name": "Chelsea Clayton", "gender": "female", "company": "QUARX", "email": "chelseaclayton@quarx.com" }, { "_id": "5b4795028e09cdff2b4eddd3", "name": "Nina Santiago", "gender": "female", "company": "QUILK", "email": "ninasantiago@quilk.com" }, { "_id": "5b4795022d194c05f45be4a8", "name": "Anderson Powell", "gender": "male", "company": "MIRACULA", "email": "andersonpowell@miracula.com" }, { "_id": "5b479502296e69f50268d1d4", "name": "Joni Conrad", "gender": "female", "company": "EVENTIX", "email": "joniconrad@eventix.com" }, { "_id": "5b47950248454355d100caa8", "name": "Latasha Barber", "gender": "female", "company": "ROTODYNE", "email": "latashabarber@rotodyne.com" }, { "_id": "5b479502d3d93cea12bd6d32", "name": "Bates Blanchard", "gender": "male", "company": "REVERSUS", "email": "batesblanchard@reversus.com" }, { "_id": "5b479502066d2c8bece54416", "name": "Williamson Shields", "gender": "male", "company": "HOMETOWN", "email": "williamsonshields@hometown.com" }, { "_id": "5b479502e66e542e7b3ef846", "name": "Hood Knight", "gender": "male", "company": "CEPRENE", "email": "hoodknight@ceprene.com" }, { "_id": "5b479502d4e03a78b01def6b", "name": "Sheree Hurst", "gender": "female", "company": "EVEREST", "email": "shereehurst@everest.com" }, { "_id": "5b479502990281e06482c347", "name": "Patrick Quinn", "gender": "male", "company": "ORBIFLEX", "email": "patrickquinn@orbiflex.com" }, { "_id": "5b47950210c4fcdfea8724ba", "name": "Corrine Brewer", "gender": "female", "company": "CORMORAN", "email": "corrinebrewer@cormoran.com" }, { "_id": "5b47950238a7d9ad591dc90a", "name": "Atkinson Clarke", "gender": "male", "company": "ECRAZE", "email": "atkinsonclarke@ecraze.com" }, { "_id": "5b479502c2ff1a7136c7b51f", "name": "Mitchell Garner", "gender": "male", "company": "EXTREMO", "email": "mitchellgarner@extremo.com" }, { "_id": "5b4795028bb8485110fd0ff5", "name": "Kinney Cruz", "gender": "male", "company": "ROOFORIA", "email": "kinneycruz@rooforia.com" }, { "_id": "5b47950214ee90aaf2d100ba", "name": "Candice Battle", "gender": "female", "company": "ISOLOGIX", "email": "candicebattle@isologix.com" }, { "_id": "5b479502bbbc1b168822af5c", "name": "Morrow Baldwin", "gender": "male", "company": "PARLEYNET", "email": "morrowbaldwin@parleynet.com" }, { "_id": "5b479502fdc358a555ad31ed", "name": "Kaye Schroeder", "gender": "female", "company": "ZILLACOM", "email": "kayeschroeder@zillacom.com" }, { "_id": "5b47950251c67079e64ab1a1", "name": "Terra Ashley", "gender": "female", "company": "PAPRICUT", "email": "terraashley@papricut.com" }, { "_id": "5b479502c48127359a40a6ff", "name": "Annie Duran", "gender": "female", "company": "APEXTRI", "email": "annieduran@apextri.com" }, { "_id": "5b479502e1bfc67b528b0864", "name": "Levine Hickman", "gender": "male", "company": "ZIALACTIC", "email": "levinehickman@zialactic.com" }, { "_id": "5b4795027f95df5fc620c1c7", "name": "Flowers Pratt", "gender": "male", "company": "CALCULA", "email": "flowerspratt@calcula.com" }, { "_id": "5b4795024adc70007fc67f8c", "name": "Mason Hubbard", "gender": "male", "company": "SATIANCE", "email": "masonhubbard@satiance.com" }, { "_id": "5b4795023df01b88eec93ccb", "name": "Mavis Jenkins", "gender": "female", "company": "SUPPORTAL", "email": "mavisjenkins@supportal.com" }, { "_id": "5b4795021ffb2bd6075cf5ad", "name": "Elinor Watts", "gender": "female", "company": "XELEGYL", "email": "elinorwatts@xelegyl.com" }, { "_id": "5b4795024e957fc2e867efd1", "name": "Stefanie Adams", "gender": "female", "company": "SYBIXTEX", "email": "stefanieadams@sybixtex.com" }, { "_id": "5b47950289990db488dcce5e", "name": "Rosa Turner", "gender": "male", "company": "TERRASYS", "email": "rosaturner@terrasys.com" }, { "_id": "5b479502aaf8c9c14b4a2a02", "name": "Good Blevins", "gender": "male", "company": "MINGA", "email": "goodblevins@minga.com" } ] </script> <script> // Esto es JSDocs... /** * Generamos una lista en formato HTML (<ul><li>...) * @param lista {array} contiene una lista de objectos con los datos de los usuarios * @param queryText {string} contiene la query del usuario, si la hubiera... */ function generarLista(lista, queryText){ if(!queryText) { var html_contenido = "<ul>" lista.forEach(function(elemento){ html_contenido += "<li data-id='"+elemento._id+"'><a class='magia' href='mailto:"+elemento.email+"'>"+elemento.name+", "+elemento.company+"</a></li>" }) html_contenido += "</ul>"; return html_contenido } else { if(!lista) { return "<h3>No tenemos datos disponibles con '"+queryText+"'</h3>" } else { var html_contenido = "<h3>Filtro Aplicado con '"+queryText+"'. En total "+lista.length+" coincidencias.</h3>" html_contenido += "<ul>" lista.forEach(function(elemento){ html_contenido += "<li data-id='"+elemento._id+"'><a class='magia2' href='mailto:"+elemento.email+"'>"+elemento.name+", "+elemento.company+"</a></li>" }) html_contenido += "</ul>"; return html_contenido } } } document.getElementById("row-contenido").innerHTML = generarLista(data) // ---- BUSACDOR! // Evento! document.getElementById("input-usuario").addEventListener("keyup", function(evento){ if (evento.keyCode === 13) { var inputData = document.getElementById("input-usuario").value.trim().toLowerCase() console.log("Lo que has escrito....", inputData) var coindicencias = buscador(inputData) console.log("Tenemos coindicencias?", coindicencias) document.getElementById("row-contenido").innerHTML = generarLista(coindicencias, inputData) } }) //Retorna coinciddencias de un texto dado... function buscador(query){ var coincidencias = []; data.forEach(function(elemento){ if( elemento._id === query || elemento.name.toLowerCase() === query || elemento.gender.toLowerCase() === query || elemento.company.toLowerCase() === query || elemento.email.toLowerCase() === query ){ coincidencias.push(elemento) } }) return coincidencias.length > 0 ? coincidencias : false; } </script> </body> </html>
UlisesGascon
commented
6 years ago UlisesGascon
commented
6 years ago