在自己的网页中嵌入百度搜索框(支持回车搜索)
点击百度一下会跳转到相应的百度搜索结果(加入了回车搜索)
代码
<div class="search-container">
<input type="text" placeholder="请输入搜索内容" class="sousuokuang">
<button type="submit" id="su" value="百度一下" class="anniu" onclick="searchBaidu()">百度一下</button>
</div>
<script>
function searchBaidu() {
var query = document.querySelector('.sousuokuang').value;
window.location.href = 'https://www.baidu.com/s?wd=' + encodeURIComponent(query);
}
document.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
event.preventDefault(); // 阻止默认行为,避免页面刷新
searchBaidu(); // 调用搜索函数
}
});
</script>
1. <div class="search-container">:创建一个包含搜索框和按钮的容器。
2. <input type="text" placeholder="请输入搜索内容" class="sousuokuang">:创建一个文本输入框,用于接收用户输入的搜索内容。
3. <button type="submit" id="su" value="百度一下" class="anniu" "searchBaidu()">百度一下</button>:创建一个提交按钮,用于触发搜索操作。该按钮绑定了点击事件处理函数searchBaidu()。
4. function searchBaidu() { ... }:定义了一个名为searchBaidu()的函数,用于实现搜索功能。
5. document.querySelector('.sousuokuang').value:通过选择器.sousuokuang选取页面中的文本输入框元素,并获取其值,即用户输入的搜索内容。
6. window.location.href = 'https://www.baidu.com/s?wd=' + encodeURIComponent(query);:构造百度搜索的URL,其中query为用户输入的搜索内容,使用encodeURIComponent()方法对搜索内容进行URL编码。然后将编码后的字符串拼接到URL末尾,并将当前页面的URL修改为该URL,从而实现跳转到百度搜索引擎的结果页面进行搜索。
7. document.addEventListener('keydown', function(event) { ... }):添加键盘按下事件监听器,当用户按下键盘上的任意键时,都会触发该事件的处理函数。
8. if (event.key === 'Enter') { ... }:判断按下的键是否为回车键。如果是回车键被按下,则执行以下操作:
event.preventDefault();:阻止默认行为,避免页面刷新。
searchBaidu();:调用searchBaidu()函数,以触发搜索操作。
<style>
.search-container .anniu {
cursor: pointer;
}
</style>