练手小demo——仿某度搜索页面

练手小demo——仿某度搜索页面

技术杂谈小彩虹2021-08-22 13:46:35150A+A-

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

写在前面

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

最终效果如下所示

案例分析

HTML 代码

分析一下案例的静态页面

image-20201115200610033
image-20201115200610033

将其使用 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 的样式代码如下所示:

* {
  margin0;
  padding0;
  box-sizing: border-box;
  list-style: none;
}

/* 最外层容器 */
.container {
  width654px;
  position: absolute;
  top50%;
  left50%;
  transformtranslate(-50%, -50%);
}

/* 搜索框的样式 */
.search-container {
  width546px;
}

input {
  display: block;
  width546px;
  height44px;
  padding12px 16px;
  font-size16px;
  margin0;
  outline0;
  box-shadow: none;
  border-radius10px 0 0 10px;
  border2px solid #c4c7ce;
  background#fff;
  color#222;
  overflow: hidden;
}

/* 当按钮获取焦点时边框颜色有所变化 */
input:focus {
  border2px solid #4e6ef2;
}

/* 按钮的样式 */
.button {
  position: absolute;
  width108px;
  top0;
  right0;
}

a {
  text-decoration: none;
  display: block;
  cursor: pointer;
  width108px;
  height44px;
  line-height45px;
  padding0;
  background-color#4e6ef2;
  border-radius0 10px 10px 0;
  font-size17px;
  color#fff;
  font-weight400;
  text-align: center;
}

/* 搜索提示框的样式 */
.content {
  width546px;
  border2px solid #4e6ef2;
  border-radius10px 0 0 0;
  display: none;
}

/* 每个内容的样式 */
.search-container li {
  padding2px 8px;
  cursor: pointer;
}

.search-container li:hover {
  background-color: aquamarine;
}

最终是实现静态页面如下所示:

image-20201115201300534
image-20201115201300534

值得注意的是我们的搜索提示框是默认隐藏的。

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

  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();
  $

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们