JavaScript实现智能搜索框

应用场景：

1. 搜索框在页面中占据的空间过小，希望无论浏览到什么位置，可以轻易地回到并聚焦搜索框。

2. 搜索框里面的文字大小过小，希望能够在上方开辟一块空间放大内容

解决思路：

1. 对整个页面添加键盘事件keyup类型的侦听器，然后使用e.keyCode属性来获得用户按下的键，如果是s/S，就让搜索框聚焦。

2. 对搜索框添加键盘事件keyup类型的侦听器，将搜索框的value赋给放大内容盒子(我用的是<p>标签)的innerText，如果不为空，就将盒子通过style.display:block显示出来。

2补充. 刚刚只是实现了搜索框有内容的时候将其放大，但是当其失去焦点，即使有内容也不应放大，重新获得焦点时如果有内容就放大。

可玩味之处：两个键盘事件都得是keyup而不是keydown或者keypress

效果(请看官脑补动态效果)

代码(css写在style标签内，js写在script标签内)

<!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>事件进阶</title><style>div p {display: none;font-size: large;background-color: #FFFDE7;}</style>
</head>
<body><div><p>123</p><input type="text"><button>搜索</button></div></body>
<script>var search = document.querySelector('input');document.addEventListener('keyup',function(e){if(e.keyCode === 83||e.keyCode === 115){console.log("keyup:"+e.keyCode);search.focus();}})var magnify = search.previousElementSibling;console.log(magnify);search.addEventListener('keyup',function(e){magnify.innerText = search.value;if(magnify.innerText!=''){magnify.style.display = 'block';}else{magnify.style.display = 'none';}})search.addEventListener('blur',function(){magnify.style.display = 'none';})search.addEventListener('focus',function(){if(search.value!=''){magnify.style.display = 'block';}})</script>
</html>

JavaScript实现智能搜索框相关推荐

淘宝购物车页面智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
JAVA ajax搜索框_JS+Ajax实现百度智能搜索框
首先浏览实现后的结果,输入一个a之后会出现包含a的下拉列表,当我们点击某一个的时候,搜索框中就会出现点击的值.实现所需要的主要是ajax+js. 前端search.jsp pageEncoding=& ...
智能搜索框html代码,js实现搜索框关键字智能匹配代码
只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在 ...
JavaScript仿新浪微博搜索框功能
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title> ...
JavaScript实现百度搜索框提示
案例---百度搜索框提示文章目录一.代码二.代码解释效果图(百度): 输入aa后底下就会出现相对应和aa有关系的一些提示. 一.代码 <!DOCTYPE html> <htm ...
原生JavaScript实战之搜索框筛选功能
成品图如下所示: 先搭建HTML结构: 1 <div class="wrapper"> 2 <div class="sWrapper"> ...
Android开源实战：简单好用、含历史搜索记录的智能搜索框
前言 Android开发中,类似下图的搜索功能非常常见今天,我将带来一款封装了历史搜索记录功能 & 样式的Android 自定义搜索框开源库,希望你们会喜欢. 已在Github开源: ...
javascript实现小米搜索框
鼠标点击出现下拉菜单效果展示: 代码: <!DOCTYPE html> <html lang="en"><head><meta char ...
EasyUI–常用控件之按钮/搜索框/密码框/文件框/数字框/日期时间选择框
点此查看全部文字教程.视频教程.源代码本篇主要介绍跟后台数据绑定相关度不大的简单控件,直接写了一个详细的例子,需要说明的东西都在注释里面. 先看示意图: <%@ page language=& ...

JavaScript实现智能搜索框

JavaScript实现智能搜索框相关推荐

最新文章

热门文章