javascript实现小米搜索框

鼠标点击出现下拉菜单

效果展示:

代码:

<!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="#">小米11</a></li><li><a href="#">小米10S</a></li><li><a href="#">小米笔记本</a></li><li><a href="#">小米手机</a></li><li><a href="#">黑鲨4</a></li><li><a href="#">空调</a></li></ul></div><script>let content=document.querySelector('input')// 获取列表let list=document.querySelector('.result-list')// 当鼠标光标显示在输入框中时,触发事件(聚焦)content.addEventListener('focus',function(){console.log('光标停在表单中')// 让ul盒子显示(display:block)list.style.display='block'})// 当鼠标光标离开输入框中时,触发事件(失焦)content.addEventListener('blur',function(){console.log('光标离开了表单')// 让ul盒子隐藏(display:none)list.style.display='none'})</script></body>
</html>

javascript实现小米搜索框相关推荐

轮播图、阅读注册协议、网页时钟、随机点名、小米搜索框、轮播图点击切换——web APIs练习
目录一.获取元素(DOM) 1. 随机轮播图案例 2. 阅读注册协议(定时器间歇函数的应用) 3. 轮播图定时器版 4. 网页时钟二.事件基础(DOM) 1. 随机点名案例 2. 轮播图点击切换( ...
JavaScript仿新浪微博搜索框功能
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title> ...
JavaScript实现百度搜索框提示
案例---百度搜索框提示文章目录一.代码二.代码解释效果图(百度): 输入aa后底下就会出现相对应和aa有关系的一些提示. 一.代码 <!DOCTYPE html> <htm ...
JavaScript实现智能搜索框
应用场景: 1. 搜索框在页面中占据的空间过小,希望无论浏览到什么位置,可以轻易地回到并聚焦搜索框. 2. 搜索框里面的文字大小过小,希望能够在上方开辟一块空间放大内容解决思路: 1. 对整个页面添 ...
原生JavaScript实战之搜索框筛选功能
成品图如下所示: 先搭建HTML结构: 1 <div class="wrapper"> 2 <div class="sWrapper"> ...
【每日一练】小米搜索框
效果: 思路分析: 输入框焦点事件 onfocus:成为焦点, 点击输入框的时候,出现闪烁光标,此时可以输入内容. onblur :失去焦点, 点击页面空白区域,光标消失.此时不可以输入内容. 1.获 ...
EasyUI–常用控件之按钮/搜索框/密码框/文件框/数字框/日期时间选择框
点此查看全部文字教程.视频教程.源代码本篇主要介绍跟后台数据绑定相关度不大的简单控件,直接写了一个详细的例子,需要说明的东西都在注释里面. 先看示意图: <%@ page language=& ...
html 搜索框自动补全,自动完成的搜索框javascript实现
自动完成的搜索框javascript实现 2019-01-04 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了自动完成的搜索框javascript实现,编程之家 ...
JavaScript实现搜索框效果
要求:搜索框获取焦点的时候如果里面的内容是"请输入关键字",则清空,否则不清空 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

javascript实现小米搜索框

javascript实现小米搜索框相关推荐

最新文章

热门文章