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

本文链接：https://blog.csdn.net/weixin_46163658/article/details/109709822

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

写在前面

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

最终效果如下所示

案例分析

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://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></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();
  $serachBtn.attr('href', 'https://www.baidu.com/s?wd=' + inputValue)
})

完整代码如下所示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>仿百度搜索框</title>
  <script src="./library/jQuery 1.12.4.js"></script>
  <style>
    * {
      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;
    }
  </style>
</head>

<body>
  <!-- 搜索框的整体容器 -->
  <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>
  <script>
    $('#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>'))
            });
          }
        });
      });
      // 将提示框变为现实状态
      $('.content').css('display', 'block')
    })
    // 2. 完成点击下拉列表完成替换文本框内荣
    $('.content ul').click(function (event) {
      var text = $(event.target).text()
      $('#serach').val(text);
      $('.content').css('display', 'none')
    })

    // 3. 当鼠标失去焦点时，搜索提示框消失
    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')
      }
    })
    // 4  完成搜索功能
    var $serachBtn = $('#serachBtn')
    $serachBtn.click(function () {
      var inputValue = $('#serach').val();
      $serachBtn.attr('href', 'https://www.baidu.com/s?wd=' + inputValue)
    })
  </script>
</body>

</html>