文本检索演示
<div class="codebox" data-prev="1"><style>
.box { margin: 20px auto; width: 80%; }
.items { padding: 4px 8px; }
.items:hover { background: #aaa; }
.invisibled { display: none; }
</style>
<div class="box">
<label for="searchInput">搜索</label>
<input type="text" id="searchInput" />
</div>
<div id="articleList" class="box"></div>
<script>
const articleList = document.querySelector('#articleList');
const searchInput = document.getElementById('searchInput');
// 字符来源
const str = `ABCD中国园林是由建筑、山水、花木等组合而成的一个oo综合艺术品，147富有诗情画意。Mi叠山理水要造成“虽由人作，宛自天开”的境界。山与la水的关系究竟如何呢？abcd简言之，模山范水，用局部之la景而非缩小(网师园水池仿虎丘白莲池，极妙)，ok处理原则悉符画本。OK山贵有脉，水OO贵有源，脉源贯通，全园生动。xyz我曾经用“水随山转，山因水活”B&B与“溪水因山成曲折，山蹊随地作低mi平”来说La明山水之pink间的关系，也就是369从真山真水中所得到的启示。Let明末清初叠山家张南垣主张用平冈小陂、Pink陵阜陂阪，也就是要使园林山水la接近自然。如果我们Mi能初步理解这个道理，就b&b不至于离自然太远，XYZ多少能呈现水Mi石交融的美妙境界。`;
//文档片段
const fragment = new DocumentFragment();
//随机生成30个div并赋予其随机文本
for (let x = 0; x < 30; x ++) {
const start = Math.floor(str.length / 2);
const a = Math.floor(Math.random() * start);
const b = a + Math.ceil(Math.random() * 20);
const output = str.substring(a, b);
const div = document.createElement('div');
div.classList.add('items');
div.textContent = (x + 1) + '. ' + output;
fragment.appendChild(div); //加入到文档片段
}
articleList.appendChild(fragment); //加入到文章列表
const searchArticles = () => {
const divs = document.querySelectorAll('.items');
const keyword = searchInput.value;
//清除隐藏CSS类
divs.forEach(div => div.classList.remove('invisibled'));
//隐藏不包含关键字的div
for (let j = 0; j < divs.length; j++) {
if (divs.textContent.indexOf(searchInput.value) === -1) {
divs.classList.add('invisibled');
}
}
};
//关键字文本框输入时
searchInput.oninput = () => searchArticles();
</script>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 本演示——
检索目标 ：指定元素
检索对象 ：指定元素内所有 div 标签的文本
检索方法 ：在搜索输入框输入任何字符
这是为实现帖宝的检索功能而单独做的测试案例，感觉有用，所以公布出来。 这种技术活，看起来就头大{:4_173:} 沐心 发表于 2025-9-22 14:43
这种技术活，看起来就头大
不是一个头来两个大就好{:4_170:} 马黑黑 发表于 2025-9-22 18:26
不是一个头来两个大就好
也就差不多这意思，所以我代码只会套用，有时候改动还容易改乱码了{:4_173:} 马黑黑 发表于 2025-9-22 13:10
本演示——
检索目标 ：指定元素
特别灵敏，输入一个字它就把包含的筛选出来了。 花飞飞 发表于 2025-9-22 19:30
特别灵敏，输入一个字它就把包含的筛选出来了。
就是花飞飞的速度{:4_170:} 沐心 发表于 2025-9-22 18:31
也就差不多这意思，所以我代码只会套用，有时候改动还容易改乱码了
改乱了再来，没关系 多点几次发现文档是随机排行的，每行字数随机，内容也随机，感觉很神奇。。。
鼠标移到某一行会高亮，这个跟平时的代码一样。。 花飞飞 发表于 2025-9-22 19:39
多点几次发现文档是随机排行的，每行字数随机，内容也随机，感觉很神奇。。。
鼠标移到某一行会高亮，这个 ...
这个只是演示，所以弄出一些随机的文本 这个是文字搜索，原来研究这个是为了帖宝的检索，这个很好用的呢{:4_187:} JS里的中文字
//清除隐藏CSS类 这一行隐藏CSS是清的哪一类不知道了。
//隐藏不包含关键字的div 这一行比较明白，确定搜索关键字之后，没有的隐藏起来。。
搜索常用啊，原来背景有这么多工作要做。。
看这代码也挺简洁的，跟做个贴子差不多的量。。{:4_173:} 花飞飞 发表于 2025-9-22 19:43
JS里的中文字
//清除隐藏CSS类 这一行隐藏CSS是清的哪一类不知道了。
//隐藏不包含关键字的div 这 ...
过滤的工作机制是酱紫：
检索的时候，将不包含关键字的 div 隐藏掉。如此，每次重新检索，都需要将已经隐藏的解除，再重新隐藏要隐藏的 div。 红影 发表于 2025-9-22 19:43
这个是文字搜索，原来研究这个是为了帖宝的检索，这个很好用的呢
帖宝的检索其实完全可以使用数据库，但从性能上讲，DOM检索速度更快，所以思考再三，决定从已有的列表中进行检索 马黑黑 发表于 2025-9-22 19:46
过滤的工作机制是酱紫：
检索的时候，将不包含关键字的 div 隐藏掉。如此，每次重新检索，都需要将已 ...
原来是有隐藏，也要有清除隐藏，方便下次检索。。{:4_173:}
感觉代码的排列总是有点倒序。。 马黑黑 发表于 2025-9-22 19:39
这个只是演示，所以弄出一些随机的文本
看出来了，排列是没有任何规律的 马黑黑 发表于 2025-9-22 19:35
就是花飞飞的速度
花飞飞没啥速度呀。。。最近都没做贴子
现在看到贴宝里的导入导入，检索。。。
贴宝里这几项太方便了，如果贴子太多，就可以凭印象关键词就可以搜到。。 花飞飞 发表于 2025-9-22 20:17
花飞飞没啥速度呀。。。最近都没做贴子
现在看到贴宝里的导入导入，检索。。。
贴宝里这几项太方便了， ...
用用再说吧 花飞飞 发表于 2025-9-22 20:16
看出来了，排列是没有任何规律的
嗯嗯 花飞飞 发表于 2025-9-22 20:16
原来是有隐藏，也要有清除隐藏，方便下次检索。。
感觉代码的排列总是有点倒序。。
很多事情，思维方式和人不同。
这和canvas画布一样：先把一切请了再画