效果图:
可以通过 https://littlehiuman.github.io/05-SearchList/ 查看效果。
https://github.com/littleHiuman/littleHiuman.github.io 求点star~~~
CSS:
#kw { 286px; height: 30px; padding: 0 5px; line-height: 30px; font-size: 16px; outline: none; border: solid #87a900 2px; } #append { 296px; border: solid #87a900 2px; border-top: 0; display: none; } .item { padding: 3px 5px; cursor: pointer; } .item:hover{ background: #87a900; color: #fff; }
HTML:
<div id="content"> <input id="kw" onKeyup="getContent(this);" placeholder="你好" /> <div id="append"></div> </div>
JAVASCRIPT:
var data = [ '你好,我是Michael', '你是谁', '你最好啦', '你最珍贵', '你是我最好的朋友', '你画我猜', '你是笨蛋', '你懂得', '你为我着迷', '你是我的眼' ] var oInput = document.getElementById('kw') var append = document.getElementById('append') function getContent(obj) { var kw = obj.value.trim() if (kw == '') { append.style.display = 'none' append.innerHTML = '' return false } var html = '' for (var i = 0; i < data.length; i++) { if (data[i].indexOf(kw) >= 0) { html = html + "<div class='item' onClick='getCon(this);'>" + data[i] + '</div>' } } if (html != '') { append.style.display = 'block' append.innerHTML = html } } function getCon(obj) { var value = obj.innerText oInput.value = value append.style.display = 'none' append.innerHTML = '' }
maven -- 问题解决(三)Java compiler level does not match the version of the installed Java project facet
mybatis学习笔记(四)-- 为实体类定义别名两种方法(基于xml映射)
mybatis学习笔记(三)-- 优化数据库连接配置
mybatis学习笔记(二)-- 使用mybatisUtil工具类体验基于xml和注解实现
mybatis学习笔记(一)-- 简单入门(附测试Demo详细过程)
c# -- 解决vs使用本地iis运行项目支持局域网访问的问题(附防火墙端口开放步骤)
sqlserver -- 查看当前数据库的数据表(备忘)
sqlserver -- 解决sqlserver2008“Prevent saving changes that require table re_creation(阻止保存要求重新创建表的更改)”的问题
关于mysql 5.7版本“报[Err] 1093