多引擎搜索栏代码:一键切换搜狗、百度、必应、谷歌搜索
<div class='search-container'>
<select id='search-engine'>
<option value='sogou'>搜狗</option>
<option value='baidu'>百度</option>
<option value='bing'>Bing</option>
<option value='google'>Google</option>
</select>
<input type='text' id='search-input' placeholder='请输入搜索内容'>
<button onclick='search()'>搜索</button>
</div>
<script>
function search() {
var searchEngine = document.getElementById('search-engine').value;
var searchContent = document.getElementById('search-input').value;
switch (searchEngine) {
case 'sogou':
window.location.href = 'https://www.sogou.com/search?q=' + searchContent;
break;
case 'baidu':
window.location.href = 'https://www.baidu.com/s?wd=' + searchContent;
break;
case 'bing':
window.location.href = 'https://www.bing.com/search?q=' + searchContent;
break;
case 'google':
window.location.href = 'https://www.google.com/search?q=' + searchContent;
break;
default:
break;
}
}
</script>
<style>
.search-container {
display: flex;
align-items: center;
padding: 10px;
border-radius: 20px;
border: 1px solid #ccc;
}
.search-container input[type='text'] {
flex: 1;
padding: 5px;
border: none;
border-radius: 20px 0 0 20px;
}
.search-container select {
padding: 5px;
border: none;
}
.search-container button {
padding: 5px 10px;
border: none;
background-color: #fff;
border-radius: 0 20px 20px 0;
cursor: pointer;
}
</style>
原文地址: https://www.cveoy.top/t/topic/lDpZ 著作权归作者所有。请勿转载和采集!