js模糊搜索，关键字匹配搜索

PROMULGATOR

In to the blue.

上海市

← canvas时钟特效(原创)

→ js原生画板

相关代码

js模糊搜索，关键字匹配搜索

拖拽实现排序，修改后可存入数据库

div模拟select

模拟qq聊天（原创）

jQuery模拟下拉框多选

jquery+css模拟下拉框

div模拟下拉框

Html

Css

Js

 * {
	list-style:none;
}
.box {
	width:300px;
	height:1000px;
	border:solid 1px red;
	margin:50px auto;
}
input {
	width:297px;
	height:30px;
}
ul li {
	border-bottom:solid 1px skyblue;
	font-size:13px;
}

var ul = document.querySelector("ul"); //获取内容区
var put = document.querySelector(".put"); //获取输入文本框
var arr = [{ //创建数据库
    name: "鬼女红叶 ",
    say: "让一切都染成红色吧!哈哈哈 "
}, {
    name: "萤草",
    say: "别挠了,好痒啊"
}, {
    name: "彼岸花",
    say: "你想成为我的花泥吗？"
}, {
    name: "青行灯",
    say: "百鬼物语第一页!"
}, {
    name: "山兔",
    say: "蛙先生，出击出击！"
}, {
    name: "玉藻前",
    say: "堕天之力,覆灭吧京都！"
}, {
    name: "金鱼姬",
    say: "我们一起征服世界吧!"
}, {
    name: "铃鹿御前",
    say: "我是灵鹿山唯一的主人"
}, {
    name: "小松丸",
    say: "我是小松丸,登场"
}, {
    name: "荒川之主",
    say: "吾乃荒川之主"
}, {
    name: "天女",
    say: "昊天所创建的世界皆由我安排"
}, {
    name: "妖琴师",
    say: "嘘,安静"
}];
ul.innerHTML = arr.map(function(item) { //先把数据库里的渲染到ul内容区
    return `<li>
            <p>${item.name}</p>
            <p>${item.say}</p>
            </li>`
}).join("");
put.addEventListener("input", function() { //给input添加二级dom点击事件并且获取输入的内容
    var putvalue = put.value;
    var nei = arr.filter(function(item) { //从数据库进行数据筛选
        return item.name.indexOf(putvalue) != -1 || item.say.indexOf(putvalue) != -1; //开始判断如果输入的内容哪怕一个字在数据库存在过
    })
    ul.innerHTML = nei.map(function(item) { //就把这个存在的数据重新进行渲染到ul内容区
        return `<li>
                            <p>${item.name}</p>
                            <p>${item.say}</p>
                            </li>`
    }).join("");
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js模糊搜索，关键字匹配搜索



代码描述：js查询关键字搜索内容代码

更新时间：2020-09-19 23:54:38
获取内容区获取文本框内容与模拟数据进行判断数据为渲染进去

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>js模糊搜索，关键字匹配搜索-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号