正如标题所说，我正在尝试找出是否有一种方法可以向我网站的一些页面添加搜索栏或其他内容，其功能与 Google Chrome 或其他浏览器上的 Ctrl+F 相同。本质上是针对整个页面的“查找”功能。我的网站之一是 WordPress 网站，因此如果它像安装我可能错过的特定插件一样简单，那就太好了。
非常感谢大家。
有趣的是，实际上有一个本质上针对整个页面的“查找”功能，它甚至内置在所有浏览器中，甚至被称为......
findwindow.find重要警告：它从未标准化，并且可能不完全是您将使用的，因为它实际上执行类似于 Ctrl+F 的操作，因此它将焦点移动到第一个和连续的搜索匹配事件，因此它可能不适用于“查找”当您输入时”。
<input value="Hello"><button onclick="find(previousSibling.value)">Search</button>
<p>Hi, Hello, Bye!</p>我刚刚用过这个。经过一些调整，我成功地在 WordPress 中获得了单个页面的搜索框，其样式为搜索按钮、重置按钮，以及使用 oneclick 或 href 弹出的道具提示。
你那里的东西太棒了！非常感谢您的分享，因为我能够以此为基础。
我使用的代码以防万一这对任何人都有用......
（我还在那里添加了一些虚拟文本搜索块）和专业提示功能。
<!-- Search Bar Section -->
<div class="search-container">
<div class="search-bar">
<!-- Search Input -->
<input type="text" id="filterInput" class="search-input" placeholder="Search for names..." onkeyup="filterContent()">
<!-- Button Container -->
<div class="search-buttons">
<button class="search-button" onclick="filterContent()">Search</button>
<button class="reset-button" onclick="resetFilter()">Reset</button>
<!-- Pro Tip Icon -->
<a href="#pro-tip-link" class="pro-tip" onclick="openProTipPopup()">💡 Pro Tip</a>
</div>
</div>
</div>
<!-- Example Rows with the class "content-block" -->
<div class="content-block">
<h3>John Doe</h3>
<p>Some information about John Doe.</p>
</div>
<div class="content-block">
<h3>Jane Smith</h3>
<p>Details about Jane Smith.</p>
</div>
<div class="content-block">
<h3>David Johnson</h3>
<p>Some notes on David Johnson.</p>
</div>
<!-- CSS for Search Box, Buttons, Pro Tip, and Responsive Layout -->
<style>
/* General Styles for Search Container and Centering */
.search-container {
margin-top: 20px;
text-align: center;
width: 100%;
}
.search-bar {
display: inline-block;
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
/* Search Input Styling with Extra Padding */
.search-input {
font-size: 24px;
border-radius: 12px;
font-family: Arial, sans-serif;
padding: 10px 20px; /* Add extra left and right padding */
width: 60%; /* Desktop width */
border: 1px solid #ccc;
box-sizing: border-box;
margin-bottom: 15px; /* Add space beneath the search input */
}
/* Search Button Styling */
.search-button, .reset-button {
font-size: 24px;
border-radius: 12px;
padding: 10px;
padding-left: 20px; /* Add extra padding on the left */
padding-right: 20px; /* Add extra padding on the right */
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
margin-left: 10px;
}
.search-button {
background-color: green;
color: white;
}
.search-button:hover {
background-color: lightgreen;
}
.reset-button {
background-color: red;
color: white;
}
.reset-button:hover {
background-color: salmon;
}
/* Pro Tip Styling */
.pro-tip {
font-size: 18px;
color: #007bff;
text-decoration: none;
margin-left: 15px;
padding: 10px;
border: 1px solid transparent;
cursor: pointer;
}
.pro-tip:hover {
color: #0056b3;
text-decoration: underline;
}
/* Optional: Add a hover effect to show it's interactive */
.pro-tip:before {
content: '💡'; /* Icon before the text */
margin-right: 5px;
}
/* Adding space beneath the buttons */
.search-buttons {
margin-bottom: 20px; /* Add space beneath the buttons */
}
/* Content block styling */
.content-block {
width: 100%;
max-width: 1000px;
margin: 20px auto;
padding: 10px;
border: 1px solid #ccc;
border-radius: 8px;
text-align: left;
}
/* Hidden class to hide rows */
.hidden {
display: none;
}
/* Tablet Styles (max-width 1024px) */
@media (max-width: 1024px) {
.search-input {
font-size: 20px;
width: 70%; /* Tablet width */
padding: 10px 15px; /* Adjust padding for tablet */
}
.search-button, .reset-button {
font-size: 20px;
padding-left: 15px;
padding-right: 15px;
}
.search-bar {
gap: 10px;
}
}
/* Mobile Styles (max-width 600px) */
@media (max-width: 600px) {
.search-input {
font-size: 18px;
width: 100%; /* Full width for mobile */
padding: 8px 10px; /* Adjust padding for mobile */
}
.search-button, .reset-button {
font-size: 18px;
width: 48%; /* Buttons side by side, each taking 48% width */
padding-left: 10px;
padding-right: 10px;
}
.search-bar {
display: flex;
flex-direction: column;
gap: 5px;
}
.search-buttons {
display: flex;
justify-content: space-between; /* Align buttons side by side */
margin-bottom: 20px; /* Add space beneath the buttons */
}
}
</style>
<!-- JavaScript for Filtering Rows Based on Multiple Keywords -->
<script>
function filterContent() {
const input = document.getElementById('filterInput').value.toLowerCase();
// Split input into an array of keywords (split by spaces)
const keywords = input.split(' ').filter(Boolean); // Remove empty strings
const rows = document.querySelectorAll('.content-block');
rows.forEach(function(row) {
const text = row.textContent.toLowerCase();
const matchesAllKeywords = keywords.every(function(keyword) {
return text.includes(keyword);
});
if (matchesAllKeywords) {
row.style.display = "block"; // Show row if it matches all keywords
} else {
row.style.display = "none"; // Hide row if it doesn't match all keywords
}
});
}
function resetFilter() {
const rows = document.querySelectorAll('.content-block');
rows.forEach(function(row) {
row.style.display = "block";
});
document.getElementById('filterInput').value = ''; // Clear the input field
}
function openProTipPopup() {
// You can replace this with a more advanced modal pop-up code or link
alert("Pro Tip: Use multiple keywords to refine your search!");
}
</script>