html - 如何在 html 文本搜索中忽略短代码
问题描述
我正在寻找特定问题的解决方案:
我正在尝试使用带有搜索选项的 w3schools 下拉菜单,其中结合了国家标志的短代码,我需要搜索功能将忽略短代码并仅查找国家名称。有人可以提供解决方案吗?
预先感谢。
我附上基本 w3schools html 代码的链接和一些屏幕截图以便更好地解释:
我的代码
解决方案
WordPress 简码是在运行时解析的,因此您实际上需要担心这些简码的输出是什么。可能像<img src="/path/to/flags/flag-1.png" />
由于您显然可以控制下拉列表中的 HTML 标记,因此我只需将 Country 包装在一个跨度中,然后使用 JavaScript 来定位它。以下面的代码片段为例:
你会注意到它不再关心锚内部的任何其他内容,而只关心锚内部的文本span
。
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
var label = a[i].querySelector('span');
if (label.innerText.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
.dropbtn{background-color:#4CAF50;color:#fff;padding:16px;font-size:16px;border:none;cursor:pointer}.dropbtn:focus,.dropbtn:hover{background-color:#3e8e41}#myInput{border-box:box-sizing;background-image:url(searchicon.png);background-position:14px 12px;background-repeat:no-repeat;font-size:16px;padding:14px 20px 12px 45px;border:none;border-bottom:1px solid #ddd}#myInput:focus{outline:#ddd solid 3px}.dropdown{position:relative;display:inline-block}.dropdown-content{display:none;position:absolute;background-color:#f6f6f6;min-width:230px;overflow:auto;border:1px solid #ddd;z-index:1}.dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown a:hover{background-color:#ddd}.show{display:block}
<h2>Search/Filter Dropdown</h2>
<p>Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
<a href="#about"><i class="flag a"></i><span>About</span></a>
<a href="#base"><i class="flag b"></i><span>Base</span></a>
<a href="#blog"><i class="flag b"></i><span>Blog</span></a>
<a href="#contact"><i class="flag c"></i><span>Contact</span></a>
<a href="#custom"><i class="flag c"></i><span>Custom</span></a>
<a href="#support"><i class="flag s"></i><span>Support</span></a>
<a href="#tools"><i class="flag t"></i><span>Tools</span></a>
</div>
</div>
推荐阅读
- python - 访问嵌套字典中的数据
- python-3.x - 如何使用 pandas 将 csv 文件读入数据框
- javascript - 如果字符串以某些值开头,有没有办法排除它?
- django - 显示来自查询集的所有内容,而不是仅显示一个元素
- html - 使用 Angular 动态地使用 XY 坐标将图像放在另一个图像上
- php - 循环内的帖子(构造)中的变量+文本
- c# - '字段列表' MySQL 异常中的未知列
- mpxj - ProjectFile.getDefaultCalendar 与 ProjectProperties.getDefaultCalendarName 不匹配
- ruby-on-rails - Docker容器中的Rails加密凭据
- java - 使用类中介在 WSO2 ESB 中创建自定义代理时发生错误