<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;
}
}
});
});
