用html和js写一个搜索框可以自定义搜索引擎简约风扁平化带有iOS风格兼容市面上的大部分搜索引擎把搜索引擎的选择隐藏在一个不起眼的按钮里支持自定义搜索引擎
时间: 2023-05-27 09:02:15 浏览: 95
以下是一个简单的搜索框示例,包含自定义搜索引擎功能:
HTML代码:
```
<div class="search-container">
<input type="text" id="search-input" placeholder="Search...">
<button class="search-button" onclick="search()">Search</button>
<div class="search-engines">
<button class="engine-button" onclick="selectEngine()">Google</button>
<button class="engine-button" onclick="selectEngine()">Bing</button>
<button class="engine-button" onclick="selectEngine()">Yahoo</button>
<button class="engine-button" onclick="selectCustomEngine()">Add</button>
<div id="custom-engine" class="hidden">
<input type="text" id="engine-name" placeholder="Enter engine name">
<input type="text" id="engine-url" placeholder="Enter engine search url">
<button class="add-button" onclick="addEngine()">Add Engine</button>
</div>
</div>
</div>
```
CSS代码:
```
.search-container {
display: flex;
align-items: center;
}
#search-input {
flex: 1;
padding: 6px;
font-size: 16px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
.search-button {
margin-left: 6px;
padding: 6px 12px;
font-size: 16px;
border: none;
border-radius: 4px;
background-color: #4CAF50;
color: #fff;
cursor: pointer;
}
.search-engines {
position: relative;
}
.engine-button {
margin-left: 6px;
padding: 6px 12px;
font-size: 16px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
cursor: pointer;
}
#custom-engine {
position: absolute;
top: 100%;
left: 0;
margin-top: 6px;
padding: 6px;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.hidden {
display: none;
}
```
JS代码:
```
var searchUrl = 'https://www.google.com/search?q=';
function search() {
var searchInput = document.getElementById('search-input');
var query = searchInput.value;
window.location.href = searchUrl + encodeURIComponent(query);
}
function selectEngine() {
// TODO: set searchUrl based on selected engine
// example: searchUrl = 'https://www.bing.com/search?q=';
}
function selectCustomEngine() {
var customEngine = document.getElementById('custom-engine');
customEngine.classList.toggle('hidden');
}
function addEngine() {
var engineName = document.getElementById('engine-name').value;
var engineUrl = document.getElementById('engine-url').value;
if (engineName && engineUrl) {
var engines = document.getElementsByClassName('search-engines')[0];
var button = document.createElement('button');
button.className = 'engine-button';
button.textContent = engineName;
button.onclick = function() {
searchUrl = engineUrl;
selectEngine();
}
engines.insertBefore(button, engines.lastChild);
var customEngine = document.getElementById('custom-engine');
customEngine.classList.add('hidden');
}
}
```
上面的代码展示了一个简单的搜索框,包含一个文本输入框、搜索按钮和选择搜索引擎的按钮。点击搜索按钮会将查询字符串添加到搜索引擎的URL中,并打开新页面进行搜索。选择搜索引擎时,可以通过设置全局变量searchUrl来确定所选引擎的URL。添加自定义搜索引擎时,用户可以在弹出的表单中输入引擎名称和搜索URL,并将其添加为选项之一。
相关推荐
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)