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

时间:2021-1-8 作者:admin

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

写在前面

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

最终效果如下所示

案例分析

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 事件时,由于执行顺序的不同,使我们上一步的功能直接失效,问题截图如下所示:

解决方案:由于我们的搜索框和提示框有一个共同容器,我们为该容器绑定 mouseovermouseout 事件,只有鼠标移动到我们的容器外面其隐藏提示框才会执行。

实现代码如下所示:

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();  $
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。