仿某度搜索页面，终于不用在被某度的垃圾信息辣眼睛了

❝

「古之立大事者，不惟有超世之才，亦必有坚忍不拔之志」——苏轼

❞

写在前面

我们在使用某度搜索引擎的时候，其页面的垃圾信息一直困扰着我们。
通过这篇博客我们可以自己写一个某度的搜索界面，而且可以按这种方式将 某歌 某应都集成在一个界面中，方便我们使用。
下面进入正题！！！

最终效果如下所示

案例分析

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 事件，当我们搜索框的内容被修改时触发该事件。具体实现步骤如下所示

1. 为搜索框绑定 input 事件。
2. 清除原来的搜索提示框
3. 获取搜索框的内容
4. 获取 .json 文件的内容
5. 由于获取的 JSON 文件最开始是两个对象的数组，我们需要先遍历该数组，得到其 name 的值
6. 判断搜索框的内容是否在 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> 的文本内容替换到 搜索框中。具体实现步骤如下：

1. 绑定 click 事件
2. 获取 <li> 的文本内容
3. 替换搜索框的文本内容
4. 将搜索提示框变消失

「遇到的问题」：由于我们将 <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')  }})

「最后一步」：完成搜索功能

1. 为按钮绑定 click 事件
2. 修改 <a> 的 href 的值使其可以成功跳转

实现代码如下所示

var $serachBtn = $('#serachBtn')$serachBtn.click(function () {  var inputValue = $('#serach').val();  $