效果图：
需求分析：
1、输入框焦点事件
onfocus:成为焦点, 点击输入框的时候，出现闪烁光标，此时可以输入内容。
onblur :失去焦点, 点击页面空白区域，光标消失。此时不可以输入内容。
2、获取元素
3、注册事件
2.1、onfocus:成为焦点, 点击输入框的时候，出现闪烁光标，此时可以输入内容
1)、显示ul
2)、自身边框改变 （通过新增search类名）
2.2、onblur :失去焦点, 点击页面空白区域，光标消失。此时不可以输入内容
1)、隐藏ul
2)、自身边框改变 （通过移除search类名）
源码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}ul {list-style: none;}.mi {position: relative;width: 223px;margin: 100px auto;}.mi input {width: 223px;height: 48px;padding: 0 10px;font-size: 14px;line-height: 48px;border: 1px solid #e0e0e0;outline: none;transition: all 0.3s;}.mi .search {border: 1px solid #ff6700;}.result-list {display: none;position: absolute;left: 0;top: 48px;width: 223px;border: 1px solid #ff6700;border-top: 0;background: #fff;}.result-list a {display: block;padding: 6px 15px;font-size: 12px;color: #424242;text-decoration: none;}.result-list a:hover {background-color: #eee;}</style>
</head><body>
<div class="mi"><input type="search" placeholder="红米手机" /><ul class="result-list"><li><a href="#">全部商品</a></li><li><a href="#">红米手机</a></li><li><a href="#">小米10S</a></li><li><a href="#">小米笔记本</a></li><li><a href="#">小米手机</a></li><li><a href="#">云米空调</a></li><li><a href="#">云米智能机器人</a></li></ul>
</div><script>/*1.输入框焦点事件onfocus:成为焦点, 点击输入框的时候，出现闪烁光标，此时可以输入内容onblur :失去焦点, 点击页面空白区域，光标消失。此时不可以输入内容2.小米官网成为焦点： (1)显示ul (2)自身边框改变 （通过新增search类名）失去焦点： (1)隐藏ul (2)自身边框改变 （通过移除search类名）3. this关键字 ： 环境对象。 常用于函数中，代表当前函数的所属环境。说人话： 相当于中文的 ‘我’ 字, 谁说的这个字，就代表谁4.js中this规则： 谁调用这个函数，this就指向谁* 事件处理函数中this一般指向事件源自身*///1.获取元素let input = document.querySelector('input')let ul = document.querySelector('.result-list')//2.注册事件//2.1 onfocus:成为焦点, 点击输入框的时候，出现闪烁光标，此时可以输入内容input.onfocus = function(){console.log('你点我了，我出现光标了，此时可以输入文字')//(1)显示ulul.style.display = 'block'//(2)自身边框改变 （通过新增search类名）this.classList.add('search')}//2.2 onblur :失去焦点, 点击页面空白区域，光标消失。此时不可以输入内容input.onblur = function(){console.log('你点其他地方了，我光标消失了，此时不可以输入文字')//(1)隐藏ulul.style.display = 'none'//(2)自身边框改变 （通过移除search类名）this.classList.remove('search')}</script>
</body>
</html>
