全站通知：
搜索框优化
刷
历
编
阅读
2026-02-05更新
最新编辑:
阅读：
更新日期：2026-02-05
最新编辑：
跳到导航
跳到搜索
功能
- 移动端点击搜索图标后，打开搜索弹窗，不直接跳转搜索界面。
安装
1、在 https://wiki.biligame.com/你管理的BWIKI/Widget:Search 页面添加内容
|
|---|
<includeonly><style>
#navSearch {
display: none !important;
}
#navSearch-button {
display: inline-block;
position: absolute;
right: 50px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
}
#simpleSearch1 #searchDelete {
background-color: unset !important;
}
#simpleSearch1 #searchInput {
padding: 1.5rem 0;
width: calc(100% - 42px);
}
#simpleSearch1 #searchInput:focus {
box-shadow: none;
}
.search-overlay.visible {
position: fixed;
display: block;
width: 100%;
height: 100%;
background-color: rgb(0 0 0 / 50%);
color: #000;
z-index: 9999;
top: 0;
left: 0;
visibility: visible;
pointer-events: auto;
user-select: auto;
padding: 0 15px;
opacity: 0;
transition: opacity 0.5s;
}
.search-overlay.visible .overlay-header {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
background-color: #eaecf0;
box-shadow: inset 0 -1px 3px rgb(0 0 0 / 8%);
border: 1px solid #fff;
margin: 10px 0;
}
.search-overlay.visible .overlay-close {
background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"%23000000\"><path d=\"m4.34 2.93 12.73 12.73-1.41 1.41L2.93 4.35z\"/><path d=\"M17.07 4.34 4.34 17.07l-1.41-1.41L15.66 2.93z\"/></svg>");
width: 40px;
height: 40px;
display: inline-block;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.search-overlay.visible .overlay-search {
display: inline-block;
width: calc(100% - 40px - 20px);
height: auto;
margin: 10px;
background-color: #fff;
}
.search-overlay.visible .suggestions {
position: unset !important;
width: 100% !important;
}
</style><script>
// 作者：怒怒 https://space.bilibili.com/141211391
// 补充和修改：时舟（sizau） https://space.bilibili.com/3546754953775813
(function () {
var overlaysContainer = document.createElement("div");
overlaysContainer.className = "mw-overlays-container";
overlaysContainer.innerHTML = `<div class="search-overlay" style="opacity:0"><div class="overlay-header"><div class="overlay-search"></div><div class="overlay-close"></div></div><div class="overlay-content"></div></div>`;
document.body.appendChild(overlaysContainer);
var originalParent = null;
var originalIndex = null;
var suggestions = null;
var navSearch = document.querySelector("#navSearch");
var navSearchButton = document.createElement("span");
navSearchButton.id = "navSearch-button";
navSearchButton.className = "visible-xs";
navSearchButton.innerHTML = navSearch.innerHTML;
navSearch.insertAdjacentElement("afterend", navSearchButton);
navSearch.remove();
var searchForm = document.querySelector("#searchform");
var searchOverlay = document.querySelector(".search-overlay");
var overlayContent = document.querySelector(".overlay-content");
navSearchButton.addEventListener("click", function () {
searchOverlay.classList.add("visible");
searchOverlay.style.opacity = '1';
// 保存原始位置
if (originalParent === null) {
originalParent = searchForm.parentElement;
originalIndex = Array.from(originalParent.children).indexOf(searchForm);
}
// 移动搜索框
document.querySelector(".overlay-search").appendChild(searchForm);
document.body.style.overflow = "hidden";
document.querySelector("#searchInput").focus();
if (suggestions) {
overlayContent.appendChild(suggestions);
} else {
setTimeout(function () {
suggestions = document.querySelector(".suggestions");
if (suggestions) {
overlayContent.appendChild(suggestions);
}
}, 500);
}
});
var overlayClose = document.querySelector(".overlay-close");
overlayClose.addEventListener("click", function () {
searchOverlay.style.opacity = '0';
setTimeout(function () {
searchOverlay.classList.remove("visible");
}, 500);
// 将搜索框移回原始位置
if (originalParent !== null) {
if (originalIndex >= originalParent.children.length) {
originalParent.appendChild(searchForm);
} else {
originalParent.insertBefore(searchForm, originalParent.children[originalIndex]);
}
}
document.body.style.overflow = "";
if (suggestions) {
document.body.appendChild(suggestions);
}
});
function UpdateSuggestions() {
try {
var $searchInput = $("#searchInput"),
previousSearchText = $searchInput.val(),
throttleTimer,
lastTime = 0;
$searchInput.on("focus", function () {
$(this).trigger("keypress");
});
$searchInput.on("input", function () {
var searchText = $(this).val(),
currentTime = Date.now();
currentTime - lastTime >= 550
? (searchText &&
searchText !== previousSearchText &&
$("#searchInput").trigger("keypress"),
(previousSearchText = searchText),
(lastTime = currentTime))
: (clearTimeout(throttleTimer),
(throttleTimer = setTimeout(function () {
searchText &&
searchText !== previousSearchText &&
$("#searchInput").trigger("keypress"),
(previousSearchText = searchText),
(lastTime = Date.now());
}, 550)));
});
} catch (error) { }
}
(window.RLQ = window.RLQ || []).push([["jquery"], function () {
$(document).ready(function () {
UpdateSuggestions();
});
}]);
})();
</script></includeonly>
|
2、在 https://wiki.biligame.com/你管理的BWIKI/MediaWiki:Sitenotice 页面引用
|
|
{{#widget:Search}} |
至此已完成安装，等待缓存刷新即可显示出来
作者
更新日志
- v1.11（2025-10-01）：修改css加载顺序，修正css进来过慢导致异常显示过大的搜索图标。
- v1.1（2025-02-12）：优化搜索建议的显示加载。
- v1.0（2025-02-11）：测试版发布。
沪公网安备 31011002002714 号