Question

如果您能解决这个问题，那么您就是天才。

仅使用JavaScript。

所以，到目前为止，我只能按其标题搜索手风琴。我还希望能够在内部查找其内容。

并提供包含该搜索或内容的结果或标签。

不是重复的，因为它只是JavaScript，没有jQuery。

任何帮助都是有用的。

function myFunction() {
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

var acc = document.getElementsByClassName("accor");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

#myInput {
  width: 100%;
  padding: 12px 23px 11px 13px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  padding: 10px 10px 10px 15px;
  text-decoration: none;
  color: black;
  display: block;
  text-align: left;
}

#myUL li a:hover:not(.header) {
  background-color: #ccc;
}

.accor {
  background-color: #eee;
  color: #444;
  padding: 18px;
  width: 100%;
  border: none;
  outline: none;
  font-size: 20px;
}

.active,
.accor:hover {
  background-color: #ccc;
}

.accor:after {
  content: 'open';
  color: #777;
  font-weight: bold;
  float: right;
  margin-right: 5px;
}

.active:after {
  content: "close";
}

.panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.1s ease-out;
  text-align: left;
  font-size: 12px;
}

.title {
  font-size: 20px;
}

.otras {
  font-style: italic;
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search...">
<ul id="myUL">



  <li> <a class="accor">1House</a>

    <div class="panel">
      <div class="otras">
        <p class=title>2Search by this too</p>
        <p>3This is a sentence</p>
      </div>



      <div class="otras">
        <p class=title>4Also this</p>
        <p>5Another sentence to search </p>
      </div>


      <div class="otras">
        <p class=title>6And this too</p>
        <p>7Example of sentence</p>
      </div>


    </div>
  </li>


  <li> <a class="accor">8Search here</a>

    <div class="panel">
      <div class="otras">
        <p class=title> 9A different set of title </p>
        <p>10A different set of </p>
      </div>



      <div class="otras">
        <p class=title>11Also this</p>
        <p>12Another sentence to search </p>
      </div>


      <div class="otras">
        <p class=title>13And this too</p>
        <p>14Example of sentence</p>
      </div>


    </div>
  </li>



</ul>

Answer 1

您需要稍微更改JS才能使其正常工作。代码的问题在这里：

txtValue = a.textContent || a.innerText;

您正在搜索不存在的“ OR”值。如果您查看a变量的定义，就会发现它引用了li中的anchor标签。

您需要结合锚标记AND标签的内容。

function myFunction() {
  var input, filter, ul, li, a, i, txtValue, otras;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    otras = li[i].getElementsByTagName("div")[0];
    txtValue = a.innerText + otras.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

var acc = document.getElementsByClassName("accor");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

#myInput {
  width: 100%;
  padding: 12px 23px 11px 13px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  padding: 10px 10px 10px 15px;
  text-decoration: none;
  color: black;
  display: block;
  text-align: left;
}

#myUL li a:hover:not(.header) {
  background-color: #ccc;
}

.accor {
  background-color: #eee;
  color: #444;
  padding: 18px;
  width: 100%;
  border: none;
  outline: none;
  font-size: 20px;
}

.active,
.accor:hover {
  background-color: #ccc;
}

.accor:after {
  content: 'open';
  color: #777;
  font-weight: bold;
  float: right;
  margin-right: 5px;
}

.active:after {
  content: "close";
}

.panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.1s ease-out;
  text-align: left;
  font-size: 12px;
}

.title {
  font-size: 20px;
}

.otras {
  font-style: italic;
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search...">
<ul id="myUL">



  <li> <a class="accor">1House</a>

    <div class="panel">
      <div class="otras">
        <p class=title>2Search by this too</p>
        <p>3This is a sentence</p>
      </div>



      <div class="otras">
        <p class=title>4Also this</p>
        <p>5Another sentence to search </p>
      </div>


      <div class="otras">
        <p class=title>6And this too</p>
        <p>7Example of sentence</p>
      </div>


    </div>
  </li>


  <li> <a class="accor">8Search here</a>

    <div class="panel">
      <div class="otras">
        <p class=title> 9A different set of title </p>
        <p>10A different set of </p>
      </div>



      <div class="otras">
        <p class=title>11Also this</p>
        <p>12Another sentence to search </p>
      </div>


      <div class="otras">
        <p class=title>13And this too</p>
        <p>14Example of sentence</p>
      </div>


    </div>
  </li>



</ul>

您可以在JS中看到，我为otras添加了另一个变量，然后用它来查找所需的divs内容。

您会发现，由于两个标签都包含1-4个(1,2,3,4,10,11,12,13,14)，因此您现在需要键入多个字符（以数字为基数）。

小提琴如果您想在实际中看到它： http://jsfiddle.net/disinfor/rctzqw75/17/

Answer 2

而不是只寻找XYPlot的文本，而是要查看整个#!/usr/bin/env python3 from tkinter import ttk from tkinter import * root = Tk() root.title('Title') root.resizable(width=FALSE, height=FALSE) root.geometry('{}x{}'.format(750, 750)) nb = ttk.Notebook(root) nb.grid(row=0, column=0) # Add first tab tab1 = ttk.Frame(nb) #tab1.grid(row=0, column=0) nb.add(tab1, text='Setup') # Add row label lb1 = ttk.Label(tab1, text = 'Parent Directory:') lb1.grid(row = 1, column = 1) # Add text entry txt1 = ttk.Entry(tab1) txt1.grid(row = 1, column = 2) # Add selection button btn1 = ttk.Button(tab1, text="Select") btn1.grid(row=1, column=3) root.mainloop()的内容：

li

const EL = s => document.querySelectorAll(s),
  ALL = (s, cb) => [...typeof s === 'string' ? EL(s) : s].forEach(cb);

function myFilter() {
  const val = this.value.trim(), // Get input value trimmed
    reg = new RegExp(val, 'ig'), // Construct case-insensitive global RegExp
    fil = this.getAttribute('data-filter'), // Get data attribute selector target "#myUL"
    CH = EL(fil)[0].children; // Get immediate children of UL (LI elements)
  ALL(CH, el => el.style.display = !val.length || reg.test(el.textContent) ? 'block':'none');
}

function myAccordion() {
  const panel = this.nextElementSibling;
  this.classList.toggle('active');
  panel.style.maxHeight = panel.style.maxHeight ? '' : panel.scrollHeight + 'px';
}

ALL('.accor', el => el.addEventListener('click', myAccordion));
ALL('[data-filter]', el => el.addEventListener('input', myFilter));

如何使带有手风琴的搜索过滤器也通过内部内容显示结果？

2 个答案: