Translate

Campo de busca avançado, usando lottiefiles

Campo de busca avançado, usando animação svg, e Url get params.

Nesse post estarei trazendo uma lupa de pesquisa de validação em javascript.
Confira abaixo os códigos e o exemplo completo.

Com este código você também pode efetuar a busca usando a URL do site.
Se você tiver esse código em seu site, e alguém entrar no site de modo a concatenar a url,
a busca é efetuada. Confira
Exemplo : URL_DO-MEU_SITE?search=VALOR A SER BUSCADO>
VALOR A SER BUSCADO


HTML


<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.2/lottie.js"></script>



<div align="center">



 <form action="#" method="post">

 <!-- <input id="inputsearch" placeholder="Pesquisar...." type="text" required="true" /> -->

   <textarea id="inputsearch" placeholder="Pesquisar...." type="text" required="true" rows="2" cols="30"></textarea>

   <button type="submit" title="efetuar pesquisa" onclick="valueFrom(document.getElementById('inputsearch').value, LottieEffect())" id="buttonsubmit">

   </button>

 </form>



  <br />

  <div id="widgetcontainer"></div>

</div>





CSS


<style>

#inputsearch{

 border-radius:3px;

 border-color:green;

 border-width:3px;

}

#inputsearchEmpty{

 border-radius:3px;

 border-color:red;

 border-width:3px;

}



#buttonsubmit{

 height:40px;

 width:40px;

 background: none;

 color: inherit;

 border: none;

 padding: 0;

 font: inherit;

 cursor: pointer;

 outline: inherit;

}



#sucessfullsearch{

 color: inherit;

 border: none;

 padding: 0;

 font: inherit;

 outline: inherit;

}

</style>



JAVASCRIPT


<script>

var elem = document.getElementById("widgetcontainer");

var inputsearch = document.getElementById("inputsearch");

var buttonsubmit = document.getElementById("buttonsubmit");



var pesquisar = "Pesquisar....";

var preencha_este_campo = "Preencha este campo com o valor á ser pesquisado";

var pequisa_efetuada = "Pesquisa efetuada com sucesso!";



var anim;

var nova;



(function() {

    console.log("Função anonima");

})()





var UrlJsonLottie = "https://assets2.lottiefiles.com/datafiles/h0nzHRXbLkn8WXm/data.json";

nova = {

    wrapper: buttonsubmit,

    animType: 'svg',

    loop: true,

    prerender: true,

    autoplay: true,

    path: UrlJsonLottie

};

anim = bodymovin.loadAnimation(nova);

anim.setSpeed(0.5, nova);



function LottieEffect() {

    anim.stop();

    anim.play();

}





getParams(window.location.href);



function getParams(url) {

    var params = {};

    var parser = document.createElement('a');

    parser.href = url;

    var query = parser.search.substring(1);

    var vars = query.split('&');

    for (var i = 0; i < vars.length; i++) {

        var pair = vars[i].split('search=');

        params[pair[0]] = decodeURIComponent(pair[1]);

        if (pair[1]) {

            valueFrom(pair[1]);

        }

    }

    return params;

}







function valueFrom(valueFrominputsearch) {

    if (valueFrominputsearch != "") {

        inputsearch.value = "";

        inputsearch.setAttribute("oninvalid", "this.setCustomValidity('" + inputsearch.placeholder + valueFrominputsearch + "')");





        var parser = document.createElement('h1');

        parser.setAttribute("id", "sucessfullsearch");

        parser.innerHTML = pequisa_efetuada + "...." + valueFrominputsearch;

        widgetcontainer.append(parser);



    } else {



        inputsearch.title = preencha_este_campo;

        inputsearch.setAttribute("id", "inputsearchEmpty");

        inputsearch.setAttribute("oninvalid", "this.setCustomValidity('" + preencha_este_campo + "')");

        inputsearch.placeholder = pesquisar;



        buttonsubmit.setAttribute("onclick", "valueFrom(document.getElementById('inputsearchEmpty').value, LottieEffect())");



    }



}

</script>












Postagens mais visitadas deste blog

Parceiros

Instalar Tool for Zello


Powered with


Parceiros



Tranparência


Contatos



© 2017 - 2019 Allanksr [ TFZ ]
Todos os direitos reservados