"Bootstrap Live Search Custom - Hilda"
Bootstrap 3.3.0 Snippet by hildabarbara

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="generator" content="Bootply"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="description" content=""> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="apple-touch-icon" href="/bootstrap/img/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="72x72" href="/bootstrap/img/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="/bootstrap/img/apple-touch-icon-114x114.png"> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet"> <link href="http://www.bootply.com/plugins/bootstrap-select.min.css" type="text/css" rel="stylesheet"> <!-- CSS code from Bootply.com editor --> <style type="text/css"></style></head> <body cz-shortcut-listen="true"> <div class="container"> <div> <!--<div class="panel-heading"> <h2>Dropdown Searchbox</h2> </div>--> <div class="panel-body"> <div class="row"> <div class="col-md-6"> <div class="form-horizontal"> <div class="input-group"> <div class="ddl-select input-group-btn"> <select id="ddlsearch" class="selectpicker form-control" data-style="btn-primary" style="display: none;"> <option value="conteudo">Conteudo</option> <option value="pessoas">Pessoas</option> <option value="noticias">Notícias</option> </select> </div> <input id="txtkey" type="text" class="form-control" placeholder="Digite aqui o que você procura..." aria-describedby="ddlsearch"> <span class="input-group-btn"> <!--<button id="btn-search" class="btn btn-info" type="button" >--> <i class="fa fa-search fa-fw"> <a href="#search" class="glyphicon glyphicon-search btn-pesquisar btn-info"></a> </i> </button> <div> </span> </div> </div> </div> </div> <div id="search"> <div class="panel-body"> <div class="row"> <div id="sresult" class="well"> </div> </div> </div> </div> </div> </div> <script async="" src="//www.google-analytics.com/analytics.js"></script><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <!-- JavaScript jQuery code from Bootply.com editor --> <script src="http://www.bootply.com/plugins/bootstrap-select.min.js"></script> </body> </script> </body> </html>
.btn-pesquisar { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; /* border-radius: 4px; */ } .ddl-title{ background-color:#5bc0de !important; color:#fff !important; font-style:italic; font-size:80%; } .ddl-select.input-group-btn:first-child>.btn-group:not(:first-child)>.btn { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } body { padding: 40px 0px; } #search { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform: translate(0px, -100%) scale(0, 0); -moz-transform: translate(0px, -100%) scale(0, 0); -o-transform: translate(0px, -100%) scale(0, 0); -ms-transform: translate(0px, -100%) scale(0, 0); transform: translate(0px, -100%) scale(0, 0); opacity: 0; } #search.open { -webkit-transform: translate(0px, 0px) scale(1, 1); -moz-transform: translate(0px, 0px) scale(1, 1); -o-transform: translate(0px, 0px) scale(1, 1); -ms-transform: translate(0px, 0px) scale(1, 1); transform: translate(0px, 0px) scale(1, 1); opacity: 1; } #search input[type="search"] { position: absolute; top: 50%; width: 100%; color: rgb(255, 255, 255); background: rgba(0, 0, 0, 0); font-size: 60px; font-weight: 300; text-align: center; border: 0px; margin: 0px auto; margin-top: -51px; padding-left: 30px; padding-right: 30px; outline: none; } #search .btn { position: absolute; top: 50%; left: 50%; margin-top: 61px; margin-left: -45px; } #search .close { position: fixed; top: 15px; right: 15px; color: #fff; background-color: #428bca; border-color: #357ebd; opacity: 1; padding: 10px 17px; font-size: 27px; }
$(function () { $('a[href="#search"]').on('click', function(event) { event.preventDefault(); $('#search').addClass('open'); $('#search > form > input[type="search"]').focus(); }); $('#search, #search button.close').on('click keyup', function(event) { if (event.target == this || event.target.className == 'close' || event.keyCode == 27) { $(this).removeClass('open'); } }); //Do not include! This prevents the form from submitting for DEMO purposes only! $('form').submit(function(event) { event.preventDefault(); return false; }) }); $(document).ready(function(){ $('.selectpicker').selectpicker({ width:'100px' }); $('#search').on('click',function(e){ e.preventDefault(); var search_engine = $('#ddlsearch option:selected').val(), search_key = $('#txtkey').val(), $sresult = $('#sresult'); $sredirect = $('#redirect'); label = '<span class="label label-danger">URL</span>'; if(search_engine && search_key){ switch (search_engine) { case 'conteudo': //$sresult.html('http://avisanet.globosat.net.br/SitePages/busca.aspx?k=' + search_key + '&s=Pesquisar%20na%20Avisanet&search=0'); window.open('http://avisanet.globosat.net.br/SitePages/busca.aspx?k=' + search_key + '&s=Pesquisar%20na%20Avisanet&search=0','_top'); break; case 'pessoas': $sresult.html('http://avisanet.globosat.net.br/SitePages/ResultadoBusca.aspx?k=' + search_key + '&s=Pesquisa%20por%20Pessoas&search=1'); break; case 'noticias': $sresult.html('http://avisanet.globosat.net.br/noticias/SitePages/busca.aspx?k=' + search_key + '&s=Somente%20Posts&search=2'); break; } } }); });

Related: See More


Questions / Comments: