★★★ 为打开文档添加搜索框，可以直接搜索打开文档
网友提问：
用户打开的文档很多（资源强劲，哈哈）。
多到一定程度，发现根本看不见文档标题了，只有图标。
然后只能通过“访问标签页”来查看打开的文档。
但是如果打开文档过多（比如：有100个），用肉眼寻找需要的文档，也是一个“不小的工程”。
因此用户想在“当前打开的文档”右侧添加一个搜索框，用以搜索打开的文档。这样搜索更简洁、高效。
用户说之前的版本是有搜索功能的。
发现至少在教育版本中，有此（搜索）功能（版本号：11.1.0.10009）：
其实发现这个功能还挺有用的。
在我收藏的版本里，一直到冬奥会版都有此功能（11.1.0.11115）。
但再后续版本中，则此功能为“WPS随行”代替。
搜索功能消失。
一开始以为用DLL文件取代了HTML。
经过摸索发现，虽然调用文件是DLL，但是HTML仍然起作用，这就为我们的修改提供了方便。
闲话少说，找到Kingsoft\WPS Office\版本号\office6\addons\kwebintegratedpanel\entry：（这里作者的版本是12.1.0.21915版）
下有：INDEX.HTML。这就是我们要找的文件。
把教育版的HTML复制进去，发现并不能解决问题。
不知道哪的不兼容，原因还没找到。看来此路不通。直接在原路基础上修改吧。
打开发现，依然有令牌（令牌内容后无法修改）
老规矩，在令牌之前作修改，令牌后面不动：
整个复制一份，然后，除去令牌。
这样就可以修改了。
然后这样修改后是两份在线目录了。
而令牌部分是无法删除的（删除就报错，整个容器就禁显）
发现这个令牌比较宽松。除了令牌中间不能修改，令牌结尾是可以修改的。
于是加了个IFRAME把它框起来。
<iframe width=1 height=1 border=1>
把它压在时间虫洞里。
这样就没有重复在线文档干扰了。它执行，但是只在1PX像素内显示。
这样我们就屏蔽了带令牌的在线文档，同时复制一份，就拥有一个可修改的在线文档代码。
找到这句：
<script defer="defer" src="static/js/chunk-common.js" crossorigin="anonymous" integrity="这里是-一串代码>>
把chunk-common.js 改成 chunk-common2.js
<script defer="defer" src="static/js/chunk-common2.js" crossorigin="anonymous">
把后面的一串代码删除（否则不让修改JS）。
然后找到chunk-common.js，复制一份，起名：chunk-common2.js
然后打开 chunk-common2.js 修改。
在JS末尾，加上如下代码：
// 等待页面加载完成后执行（适配WPS异步加载）
setTimeout(() => {
// 1. 找到标题容器（根据WPS实际界面调整选择器）
const titleContainer = document.querySelector('.tag-list-wrap .header .text');
if (!titleContainer) return;
// 2. 创建搜索框并设置属性（避免WPS拦截）
const searchInput = document.createElement('input');
searchInput.type = 'text';
searchInput.placeholder = '搜索文档...';
searchInput.autocomplete = 'off';
// 关键样式样式适配WPS界面
searchInput.style.cssText = `
margin-left: 8px;
padding: 3px 6px;
border: 1px solid #ccc;
border-radius: 3px;
outline: none;
font-size: 12px;
width: 160px;
vertical-align: middle;
background: #fff;
-webkit-user-select: text;
user-select: text;
`;
titleContainer.appendChild(searchInput);
// 3. 修复按键无效问题（强制捕获按键事件）
searchInput.addEventListener('keydown', (e) => {
// 允许删除键、退格键、数字键、字母键等
const allowedKeys = [8, 46, 37, 39, 13]; // 8=退格,46=删除,37=左,39=右,13=回车
if (
allowedKeys.includes(e.keyCode) ||
(e.keyCode >= 48 && e.keyCode <= 57) || // 数字键
(e.keyCode >= 65 && e.keyCode <= 90) || // 字母键
e.ctrlKey || e.altKey
) {
e.stopPropagation(); // 阻止WPS拦截
}
}, true); // 关键：使用捕获阶段监听
// 4. 修复搜索不生效（精准匹配WPS文档项结构）
function filterDocs(keyword) {
// 【核心】根据WPS实际文档项class调整（打开F12查看元素class）
const docItems = document.querySelectorAll('.tag-item, .tag-wrap');
docItems.forEach(item => {
// 提取文档名（WPS文档名通常在.text或.name类中）
const nameEl = item.querySelector('.tag-text .name, .count-name .left-item');
if (!nameEl) return;
const docName = nameEl.textContent.trim().toLowerCase();
const match = docName.includes(keyword.toLowerCase());
// 控制显示/隐藏（适配WPS的布局逻辑）
item.style.display = match ? '' : 'none';
// 如果有父容器，同步控制父容器显示
const parentItem = item.closest('.tag-item-container');
if (parentItem) {
parentItem.style.display = match ? '' : 'none';
}
});
}
// 绑定输入事件（防抖处理）
let searchTimer;
searchInput.addEventListener('input', (e) => {
clearTimeout(searchTimer);
searchTimer = setTimeout(() => {
filterDocs(e.target.value.trim());
}, 100); // 轻微延迟提升性能
});
// 初始化显示所有文档
filterDocs('');
}, 1000); // 延迟1秒确保WPS界面加载完成
这样就成功加上了搜索框。
经测试，可以搜索打开文档
其实我一直惦记教育版哪个HTML，那个看起来功能更多，页面更宽阔。有空再研究。
