<div class="centerbox">
<h1>Multi Search with Combo Box</h1>
<p class="description">Use jQuery to select between search fields with a button combo box
<br>By: <a href="https://twitter.com/freshmasterj" target="_blank">John McGarrah</a></p>
<div class="main-form-container">
<form id="" class="" method="post">
<input type="text" class="main-input main-name" name="NAME" value="Search by name" onfocus="clearText(this)" onblur="replaceText(this)" /><input type="text" class="main-input main-location" name="LOCATION" value="Search by city or postal code" onfocus="clearText(this)"
onblur="replaceText(this)" /><button type="button" class="main-btn"><p class="search-small">SEARCH BY</p><p class="search-large">Name</p></button>
<ul class="search-description">
<li>By Location</li>
<li>By Name</li>
</ul>
<input id="main-submit" class="" type="submit" value="Search" />
</form>
</div>
</div>
<!-- mobile submit -->
<button type="button" id="main-submit-mobile">Search</button>
/* Pulling in reset css and fonts http://seodesigns.com/projects/TD/css/reset.css */
body {background:#f6f6f6;}
p {font-family: "Webly Sleek SemiLight",Helvetica-,droid sans,sans-serif;font-weight: normal;margin: 0 0 1rem;}
.centerbox {position: absolute;top:50%;left:50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
width:620px;min-height:52px;z-index:2}
.centerbox h1 {margin-bottom: 25px;font-size:36px;font-family: "Webly Sleek SemiLight";font-weight: normal;text-align: center;}
.centerbox p.description {margin-bottom:40px;text-align: center;}
.description a {text-decoration:none;}
.main-input { background: #fff; height: 50px; width: 327px;color: #a7b1ab; border: 1px solid #cccccc; margin-bottom: 0px; -webkit-appearance: none; border-radius: 4px 0px 0px 4px; -moz-border-radius: 4px 0px 0px 4px; -webkit-border-radius: 4px 0px 0px 4px;display: inline-block;text-align: left;font-size: 16px; font-weight: 500; padding:0px 0px 0px 57px;font-size:16px;border-right:0px;background: #ffffff url("http://seodesigns.com/projects/TD/images/search.png") 18px 15px no-repeat;background-size:18px 18px;float:left;}
.main-location {display: none;}
#main-submit { background: #3cb13c;color: #fff; display: inline-block; font-size: 19px; font-weight: 500;text-align: center; cursor: pointer;margin-bottom: 0px; -webkit-appearance: none;
border-radius: 0px 4px 4px 0px; -moz-border-radius: 0px 4px 4px 0px; -webkit-border-radius: 0px 4px 4px 0px;width:141px;height:50px;border: 0pxpadding-top:0px;float:left;}
#main-submit:hover { background: #00a221; color: #fff !important; -webkit-appearance: none; }
#main-submit-mobile {display: none;}
footer { border-top: 0px;}
.main-btn {display: inline-block;width:150px;height:50px;border: 1px solid #cccccc;padding:0px;position: relative;float:left;border-right:0px;background: #ffffff url("http://seodesigns.com/projects/TD/images/main-bullet.png") 122px 23px no-repeat;background-size:6px 6px;cursor: pointer;}
.search-small {font-size:12px;margin:0px;color:#9B9B9B;position: absolute;top: 6px;left:16px;display: inline-block;width:80px;height:20px;text-align:left;}
.search-large {font-size:16px;margin:0px;color:#4A4A4A;position: absolute;top: 19px;left:16px;display: inline-block;width:105px;height:20px;font-weight:900;text-align:left;}
.main-form-container {height:50px;position: relative;}
ul.search-description {width:150px;position: absolute; background: #fff;right:143px;top:55px;
border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px;padding:14px 0px;border: 1px solid #E5E5E5;display: none;
-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3);
}
.search-description li {font-size:16px;color:#4A4A4A;font-weight:900;padding:6px 0px;display:block;padding-left:16px;cursor: pointer;}
.search-description li:hover {background:#f8f8f8;}
/* responsive css below */
@media only screen and (max-width: 680px) {
.main-btn {border-radius: 0px 4px 4px 0px; -moz-border-radius: 0px 4px 4px 0px; -webkit-border-radius: 0px 4px 4px 0px;border-right:1px solid #cccccc;}
ul.search-description {right:0px;z-index:9999;}
.centerbox p.description {width:284px;margin:0 auto 40px auto;}
.centerbox {width:auto;transform: translate(-50%, -60%);
-ms-transform: translate(-50%, -60%); /* IE 9 */
-webkit-transform: translate(-50%, -60%); /* Chrome, Safari, Opera */
}
.main-form-container {width:477px}
#main-submit {display: none;}
#main-submit-mobile { background: #3cb13c;color: #fff; display:block; font-size: 19px; font-weight: 500;text-align: center; cursor: pointer;margin-bottom: 0px; -webkit-appearance: none;border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;width:141px;height:50px;border: 0px;padding-top:0px;float:none;border:0px;position: fixed;bottom: 0px;right:0px;width: 100%;z-index:1;}
#main-submit-mobile:hover { background: #00a221; color: #fff !important; -webkit-appearance: none; }
footer {padding-bottom:50px;}
}
@media only screen and (max-width: 515px) {
.main-input {width:210px;}
.main-form-container {width:360px}
.centerbox h1 {width:280px;margin:0 auto 15px auto;}
.centerbox {position: absolute;top:50%;left:50%;
}
}
@media only screen and (max-width: 375px) {
.cover {background: rgba(0, 0, 0, 0) url("seodesigns.com/projects/TD/images/background.jpg") no-repeat center -175px;}
.main-input {width: 185px;padding-left:42px;background: #ffffff url("http://seodesigns.com/projects/TD/images/search.png") 12px 15px no-repeat;background-size:18px 18px;}
.main-btn {width:108px;background: #ffffff url("http://seodesigns.com/projects/TD/images/main-bullet.png") 85px 23px no-repeat;background-size:6px 6px;}
.main-form-container {width:293px}
.search-small {left:13px;}
.search-large {left:13px;}
}
//Call jQuery before below code
$('.main-btn').click(function() {
$('.search-description').slideToggle(100);
});
$('.search-description li').click(function() {
var target = $(this).html();
var toRemove = 'By ';
var newTarget = target.replace(toRemove, '');
//remove spaces
newTarget = newTarget.replace(/\s/g, '');
$(".search-large").html(newTarget);
$('.search-description').hide();
$('.main-input').hide();
newTarget = newTarget.toLowerCase();
$('.main-' + newTarget).show();
});
$('#main-submit-mobile').click(function() {
$('#main-submit').trigger('click');
});
$(window).resize(function() {
replaceMatches();
});
function replaceMatches() {
var width = $(window).width();
if (width < 516) {
$('.main-location').attr('value', 'City or postal code');
} else {
$('.main-location').attr('value', 'Search by city or postal code');
}
};
replaceMatches();
function clearText(thefield) {
if (thefield.defaultValue == thefield.value) {
thefield.value = ""
}
}
function replaceText(thefield) {
if (thefield.value == "") {
thefield.value = thefield.defaultValue
}
}
