❝
「古之立大事者,不惟有超世之才,亦必有坚忍不拔之志」——苏轼
❞
写在前面
我们在使用某度搜索引擎的时候,其页面的垃圾信息一直困扰着我们。
通过这篇博客我们可以自己写一个某度的搜索界面,而且可以按这种方式将 某歌 某应都集成在一个界面中,方便我们使用。
下面进入正题!!!
最终效果如下所示
案例分析
HTML 代码
分析一下案例的静态页面
将其使用 HTML 代码实现,具体代码如下所示:
<!-- 搜索框的整体容器 --><div class="container"> <!-- 搜索框的容器 --> <div class="search-container"> <!-- 搜索框 --> <input type="text" id="serach"> <!-- 搜索提示框的容器 --> <div class="content"> <ul></ul> </div> </div> <!-- 按钮容器 --> <div class="button"> <a id="serachBtn" href="#">百度一下</a> </div></div>
CSS 样式
CSS 的样式代码如下所示:
* { margin: 0; padding: 0; box-sizing: border-box; list-style: none;}/* 最外层容器 */.container { width: 654px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}/* 搜索框的样式 */.search-container { width: 546px;}input { display: block; width: 546px; height: 44px; padding: 12px 16px; font-size: 16px; margin: 0; outline: 0; box-shadow: none; border-radius: 10px 0 0 10px; border: 2px solid #c4c7ce; background: #fff; color: #222; overflow: hidden;}/* 当按钮获取焦点时边框颜色有所变化 */input:focus { border: 2px solid #4e6ef2;}/* 按钮的样式 */.button { position: absolute; width: 108px; top: 0; right: 0;}a { text-decoration: none; display: block; cursor: pointer; width: 108px; height: 44px; line-height: 45px; padding: 0; background-color: #4e6ef2; border-radius: 0 10px 10px 0; font-size: 17px; color: #fff; font-weight: 400; text-align: center;}/* 搜索提示框的样式 */.content { width: 546px; border: 2px solid #4e6ef2; border-radius: 10px 0 0 0; display: none;}/* 每个内容的样式 */.search-container li { padding: 2px 8px; cursor: pointer;}.search-container li:hover { background-color: aquamarine;}
最终是实现静态页面如下所示:
❝
值得注意的是我们的搜索提示框是默认隐藏的。
❞
JavaScript 代码
这里使用的并不是原生的 JavaScript ,这里引入了一个第三方库—— jQuery。
引入代码如下所示
<script src="https://www.geekschool.org/wp-content/uploads/2021/01/1610141743.2584133.jpg"></script>
人家 百度 的提示框有大量的数据在后面支持,使得提示框灰常的强大。这里我们并没有百度的数据,我们自己新建一个 .json
文件,该文件用于做异步的提示框。
.json
文件的内容如下
[{ "name": "java", "value": [ "java", "javascript", "javascript权威指南", "javascript高级程序设计" ]}, { "name": "jQuery", "value": [ "jQuery", "jQuery Ajax" ]}]
「第一步」:为我们的搜索框绑定 input
事件,当我们搜索框的内容被修改时触发该事件。具体实现步骤如下所示
- 为搜索框绑定
input
事件。 - 清除原来的搜索提示框
- 获取搜索框的内容
- 获取
.json
文件的内容 - 由于获取的 JSON 文件最开始是两个对象的数组,我们需要先遍历该数组,得到其 name 的值
- 判断搜索框的内容是否在 name 的值中,然后遍历 value 的值,将其追加到
<ul>
中
示例代码如下所示:
$('#serach').on('input', function () { // 清除相关数据 $('.content>ul').empty() // 1. 根据用户输入的内容,动态获取相关提示数据 var inputValue = $(this).val(); $.getJSON('data/data_serach.json', function (data) { $.each(data, function (index, obj) { var name = obj.name; // 判断是否包含字符串,返回索引值 if (name.indexOf(inputValue) >= 0) { var value = obj.value; $.each(value, function (index, text) { $('.content>ul').append($('<li>' + text + '</li>')) }); } }); }); // 2. 将提示框变为现实状态 $('.content').css('display', 'block')})
「第二步」:将我们选中的 <li>
的文本内容替换到 搜索框中。具体实现步骤如下:
- 绑定
click
事件 - 获取
<li>
的文本内容 - 替换搜索框的文本内容
- 将搜索提示框变消失
「遇到的问题」:由于我们将 <li>
已经全部删除了,所以为 <li>
绑定事件已经不管用了,解决的方法是通过事件委托和 event.target
属性来获取 <li>
的的文本内容
实现代码如下所示:
$('.content ul').click(function (event) { var text = $(event.target).text() $('#serach').val(text); $('.content').css('display', 'none')})
「第三步」:当搜索框失去焦点后使搜索提示框隐藏
「遇到的问题」:当我们直接为其绑定绑定 blur
事件时,由于执行顺序的不同,使我们上一步的功能直接失效,问题截图如下所示:
解决方案:由于我们的搜索框和提示框有一个共同容器,我们为该容器绑定 mouseover
和 mouseout
事件,只有鼠标移动到我们的容器外面其隐藏提示框才会执行。
实现代码如下所示:
var flag = false // 鼠标是否在输入框的内的标志$('.search-container').on('mouseover', function () { flag = false}).on('mouseout', function () { flag = true // 鼠标离开搜索的容器,将其置位 true})$('#serach').on('blur', function () { if (flag) { // 当 input 失去焦点 并且鼠标在不搜索容器中 将搜索提示框隐藏 $('.content').css('display', 'none') }})
「最后一步」:完成搜索功能
- 为按钮绑定
click
事件 - 修改
<a>
的href
的值使其可以成功跳转
实现代码如下所示
var $serachBtn = $('#serachBtn')$serachBtn.click(function () { var inputValue = $('#serach').val(); $