Bottão Flutante com área de busca

Apenas um botão flutuante com um balão de busca

by Rodrigo Portillo

HTML

<div class="area_bolinha">
  <div class="balao">
    <div class="busca">
      <input id="busca" type="search" placeholder="buscar"/>
    </div>
    <ul id="lista_tel">
     <li><span class="nome">João da Silva</span><span class="telefone">81 8888-8888</span></li>
     <li><span class="nome">Maria Costa</span><span class="telefone">81 8888-8888</span></li>
     <li><span class="nome">Zé do Cuentro</span><span class="telefone">81 8888-8888</span></li>
     <li><span class="nome">Wanda Maxmoff</span><span class="telefone">81 8888-8888</span></li>
     <li><span class="nome">João Miguel</span><span class="telefone">81 8888-8888</span></li>
     <li><span class="nome">José Fernando</span><span class="telefone">81 8888-8888</span></li>
     <li><span class="nome">Marina Costa</span><span class="telefone">81 8888-8888</span></li>
    </ul>
  </div>
  <div class="bolinha" id="bolinha">
  😁
  </div>
</div>

CSS

body{
  background: lightblue;
}
.area_bolinha{
  position: fixed;
  z-index: 10000;
  right:1rem;
  bottom: 1rem;
}

.area_bolinha .bolinha{
  padding: 1.5rem;
  text-align:center;
  display:flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1px;
  font-size: 1rem;
  border-radius: 50%;
  height: 3rem;
  width: 3rem;
  background-color: purple;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,0.2);
  position: absolute;
  z-index: 1000;
  right:0;
  bottom:0;
  cursor: pointer;
}

.balao{
 position: relative;
  font-family: sans-serif;
  font-size: 18px;
  line-height: 24px;
  width: 25rem;
  background: #fff;
  border-radius: 40px;
  padding: 24px;
  text-align: center;
  color: #000;
  box-shadow: 0 1rem 2rem rgba(0,0,0,0.2);
  position: fixed;
  z-index: 100;
  right: 1rem;
  bottom: 10rem;
  text-align: left;
  height: 20rem;
  box-sizing: border-box;
  
  margin-bottom: -10rem;
  margin-right: 3rem;
  opacity: 0;
  pointer-events: none;
  transform: scale(0);
  transform-origin: right bottom;
  transition: all .3s ease-in;
}

.balao.show{
  margin-right: 0;
  margin-bottom: 0;
  opacity: 1;
  pointer-events: all;
  transform: scale(1);
}

.balao:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-right: 24px solid #fff;
  border-left: 12px solid transparent;
  border-top: 12px solid #fff;
  border-bottom: 20px solid transparent;
  right: 32px;
  bottom: -24px;
}

.balao ul{
  list-style: none;
  padding: 0;
  overflow:auto;
  max-height: calc( 100% - 3.5rem );
  border-radius: .5rem .5rem 1rem 1rem;
}
.balao ul li{
  padding: .7rem 1rem;
  margin:0;
  display:flex;
  justify-content: space-between;
  cursor: pointer;
}
.balao ul li:nth-child(odd){
  background-color: #efefef;
}
.balao ul li:hover{
  background-color: #e8fff7;
}
.balao ul li span{
  display:block;
}
.balao ul li span.telefone{
  text-align: right;
}

.balao input{
  padding: .5rem 1rem;
  font-size: 1rem;
  width: 100%;
  box-sizing:border-box;
 ...

JavaScript

function buscar() {
  // Declare variables
  var input, filter, ul, li, span, i, txtValue;
  input = document.getElementById("busca");
  filter = input.value.toUpperCase();
  ul = document.getElementById("lista_tel");
  li = ul.getElementsByTagName("li");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    span = li[i].getElementsByTagName("span")[0];
    if (span) {
      txtValue = span.textContent || span.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "";
      } else {
        li[i].style.display = "none";
      }
    }
  }
}

document.querySelector(".area_bolinha #busca").addEventListener('keyup', buscar, false);
document.querySelector(".area_bolinha #busca").addEventListener('search', buscar, false);

document.querySelector("#bolinha").addEventListener("click", ()=>{
	el = document.querySelector(".area_bolinha .balao");
  if(el.classList.contains("show")){
  	el.classList.remove("show");
  }else{
  	el.classList.add("show");
    document.querySelector("#busca").focus();
  }
});