网页添加多搜索引擎搜索框

直接上代码：

html：

<div id="supersearch">
  <input type="radio" name="engine" value="https://www.baidu.com/s?wd=" checked id="engine-baidu" onclick="$('#search-wd')[0].placeholder = '百度搜索'">
  <label onclick="javascript:$('input:radio')[0].checked = true,$('#search-wd')[0].placeholder = '百度搜索'">百度</label>
  <input type="radio" name="engine" value="https://www.so.com/s?q=" id="engine-so" onclick="$('#search-wd')[0].placeholder = '360搜索'">
  <label onclick="javascript:$('input:radio')[1].checked = true,$('#search-wd')[0].placeholder = '360搜索'">360</label>
  <input type="radio" name="engine" value="https://cn.bing.com/search?q=" id="engine-bing" onclick="$('#search-wd')[0].placeholder = '必应国际搜索'">
  <label onclick="javascript:$('input:radio')[2].checked = true,$('#search-wd')[0].placeholder = '必应国际搜索'">Bing</label>
  <input type="radio" name="engine" value="https://search.bilibili.com/all?keyword=" id="engine-bilibili" onclick="$('#search-wd')[0].placeholder = '哔哩哔哩搜索'">
  <label onclick="javascript:$('input:radio')[3].checked = true,$('#search-wd')[0].placeholder = '哔哩哔哩搜索'">B站</label>
  <input type="radio" name="engine" value="https://translate.google.cn/#view=home&op=translate&sl=auto&tl=zh-CN&text=" id="engine-translate" onclick="$('#search-wd')[0].placeholder = 'Google翻译'">
  <label onclick="javascript:$('input:radio')[4].checked = true,$('#search-wd')[0].placeholder = 'Google翻译'">翻译</label>
  <input id='search-wd' placeholder="百度搜索" autofocus>
  <input type="button" value="搜索" id='search-btn'>
</div>

js：使用jQuery添加监听按钮和回车事件

//搜索按钮
$('#search-btn').click(function(){
  if($('#search-wd').val() =='') return false;
  href = $('input:radio:checked').val() + $('#search-wd').val();
  window.open(href, '_blank');

});
//搜索回车
$('#search-wd').keydown(function(e){
  if(e.keyCode==13){
    if($('#search-wd').val() =='') return false;
    href = $('input:radio:checked').val() + $('#search-wd').val();
    window.open(href, '_blank');
  }
});

有点丑，上CSS简单美化一下。。

#supersearch{
  position:inherit;
  top:25px;
  left:10%;
  float:left;
  margin: 0 auto;
  width:60%;
  height:35px;
  font-size:15px;
}
#search-btn{
  background-color: #2c2e2f;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  height:100%
}
input {
  background: rgba(255,255,255,0);
  border-style: solid;
  border-color: rgba(0,0,0,.3);
  border-radius: 15px;
}

效果：