js原生实现模糊查询
在线演示http://an1234.top/mohuchaxun/
服务器路径已经失效了,感兴趣的同学可以自行复制运行一下。
-
-
-
<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>
-
</head>
-
-
<body>
-
<input type="text" name="" id="inputvalue">
-
<div id="show">
-
-
</div>
-
</body>
-
<script>
-
// 获取输入框
-
let inputText = document.getElementById('inputvalue')
-
-
// 展示搜索结果
-
let show = document.getElementById('show')
-
-
// 声明存放查询数据的字符串
-
let show_value = ''
-
let tips = ['有志者事竟成。', '热爱生活,学会生活,创造生活。', '读书不觉已春深,一寸光阴一寸金。', '要么就努力的向上爬,要么就生活在社会最底层。', '坚强的信心,能使平凡的人做出惊人的事业。', '走的再远,也不要忘记回家的路。', '当上帝赐给你荒野时,就意味着,他要你成为高飞的鹰。', '过去的事情就应该放下,未来的生活才会没有负担。', '你若能作茧自缚,就能破茧成蝶。', '高傲的活着,不如平凡做自己。', '绳锯木断,水滴石穿。', '光阴似箭,日月如梭。', '人生在勤,不索何获。', '穷则变,变则通,通则久。', '百学须先立志。', '工欲善其事,必先利其器。', '人生如梦,一樽还酹江月。', '吾生也有涯,而知也无涯。', '莫等闲,白了少年头,空悲切。', '少壮不努力,老大徒伤悲。', '积土而为山,积水而为海。', '书读百遍,其义自见。', '海阔凭鱼跃,天高任鸟飞。', '穷且益坚,不坠青云之志。', '志当存高远。', '敏而好学,不耻下问。', '一日不书,百事荒芜。', '临渊羡鱼,不如退而结网。', '人而无仪,不死何为。', '言者无罪,闻者足戒。', '他山之石,可以攻玉。', '投我以桃,报之以李。', '满招损,谦受益。', '从善如登,从恶如崩。', '知人者智,自知者明。', '信言不美,美言不信。', '君子坦荡荡,小人长戚戚。', '尺有所短,寸有所长。', '尽信书,不如无书。', '当局者迷,旁观者清。', '会当凌绝顶,一览众山小。', '兼听则明,偏信则暗。', '工欲善其事,必先利其器。', '不以一眚掩大德。', '千经万典,孝悌为先。', '君子藏器于身,待时而动。', '学而不厌,诲人不倦。', '见侮而不斗,辱也。']
-
-
-
// 初始化搜索结果
-
function start_value() {
-
for (let i = 0; i < tips.length; i ) {
-
let str = '<p>' (i 1) ',' tips[i] '</p>'
-
show_value = str
-
}
-
//数据渲染到页面
-
show.innerHTML = show_value
-
}
-
-
// 调用函数
-
start_value()
-
-
-
// 输入框输入的结果查询
-
inputText.oninput = function() {
-
//每次输入清空原来的数据
-
show_value = ''
-
for (let i = 0; i < tips.length; i ) {
-
if (tips[i].includes(inputText.value)) {
-
let str = '<p>' (i 1) ',' tips[i] '</p>'
-
show_value = str
-
}
-
}
-
//数据渲染到页面
-
show.innerHTML = show_value
-
}
-
</script>
-
-
</html>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhihchbh
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel图片置于文字下方的方法
PHP中文网 06-27 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22