如何在HTML文本搜索中忽略简码 [英] How to ignore shortcode on html text search

问题描述

我正在寻找解决特定问题的方法：

I'm looking for a solution to a specific problem:

我正在尝试将w3schools下拉菜单与带有短码组合的搜索选项一起使用国家标志，我需要搜索功能将忽略短代码，仅查找国家名称。
有人可以提供解决方案吗？

I am trying to use a w3schools dropdown menu with a search option with a combination of a shortcode for countries flags and I need that the search function will ignore the shortcode and just look for the countries name. can someone please offer a solution?

感谢提前。

我正在附加链接基本的w3schools html代码和一些屏幕截图，以获得更好的解释：

I am attaching the link to the basic w3schools html code and some screenshots for a better explanation:

我的代码

推荐答案

WordPress短代码是在运行时解析的，因此您实际上需要担心这些短代码的输出是什么。可能类似于< img src = / path / to / flags / flag-1.png />

WordPress Shortcodes are parsed at at runtime, so you actually need to worry about what the output of those shortcodes is. Likely something like <img src="/path/to/flags/flag-1.png" />

由于您显然可以控制下拉列表中的HTML标记，因此我只将Country包裹在一个范围内，然后将其定位为JavaScript。以下面的代码段为例：

Since you clearly have control over the HTML markup inside the dropdown, I would just wrap the Country in a span, and target that with the JavaScript instead. Take the following snippet for example:

您将注意到，它不再关心锚点内的任何其他内容，而只关心锚点<$内的文本c $ c> span 。

You'll note that it no longer cares about anything else inside the anchor, and instead only cares about the text inside the anchor's 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>

这篇关于如何在HTML文本搜索中忽略简码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！