js原生实现模糊查询

web大白

2024-07-26 帮助1人

在线演示http://an1234.top/mohuchaxun/

服务器路径已经失效了，感兴趣的同学可以自行复制运行一下。

<!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>
</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>

这篇好文章是转载于：学新通技术网

js原生实现模糊查询

photoshop保存的图片太大微信发不了怎么办

photoshop扩展功能面板显示灰色怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

TikTok加速器哪个好免费的TK加速器推荐

Android 11 保存文件到外部存储，并分享文件

excel下划线不显示怎么办

微信公众号没有声音提示怎么办

excel图片置于文字下方的方法

微信运动停用后别人还能看到步数吗