资源

Question

我有一个过滤输入列表的函数。它适用于<a>链接和纯文本（例如city和village），但只能单独使用：

<html lang='en'>

<head>
  <meta charset='utf-8' />
  <title>Test page</title>
</head>

<body>

  <label for='listFilter'>Filter: </label>
  <input type='search' id='listSearch' />

  <ul id='list1'>
    <li><a href='#.html'>San Carlos</a>, city</li>
    <li><a href='#.html'>La Paz</a>, village</li>
    <li><a href='#.html'>Alicia</a>, city</li>
    <li><a href='#.html'>Lopez</a>, city</li>
    <li><a href='#.html'>San Isidro Sur</a>, village</li>
    <li><a href='#.html'>Santa&#8209;Clara</a>, city</li>
    <li><a href='#.html'>La&#160;Libertad</a>, village</li>
    <li><a href='#.html'>Santo Ni&#241;o</a>, village</li>
  </ul>

</body>

</html>

如何在键入链接和纯文本时使过滤器功能正常工作？（就像我输入san carlos city或san carlos, city时一样，它在过滤结果中只显示<li><a href='#.html'>San Carlos</a>, city</li>？

更新：使用innerText的问题是过滤器无法解析/识别我需要包含在某些列表中的html实体：

<li><a href='#.html'>Santa&#8209;Clara</a>, city</li>
<li><a href='#.html'>La&#160;Libertad</a>, village</li>
<li><a href='#.html'>Santo Ni&#241;o</a>, village</li>

例如，键入la libertad不会显示La Libertad，因为它使用HTML实体 （非中断空格）而不是＆＃34;普通空格＆＃34;。该功能如何识别此类HTML实体？

Answer 1

使用innerText来避免使用HTML标记。

＆＃13;

function filterList() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("listSearch");
  filter = input.value.toLowerCase();
  ul = document.getElementById("list1");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    b = li[i];
    if (b.innerText.toLowerCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

var listFilter = document.getElementById("listSearch");
if (listFilter) {
  listFilter.oninput = filterList;
}

＆＃13;

<html lang='en'>

<head>
  <meta charset='utf-8' />
  <title>Test page</title>
</head>

<body>

  <label for='listFilter'>Filter: </label>
  <input type='search' id='listSearch' />

  <ul id='list1'>
    <li><a href='#.html'>San Carlos</a>, city</li>
    <li><a href='#.html'>La Paz</a>, village</li>
    <li><a href='#.html'>Alicia</a>, city</li>
    <li><a href='#.html'>Lopez</a>, city</li>
    <li><a href='#.html'>San Isidro Sur</a>, village</li>
  </ul>

</body>

</html>

＆＃13;

资源

Node.innerText

Node.innerText是一个表示＆＃34;呈现＆＃34;的属性。节点及其后代的文本内容。

如何筛选包含链接和纯文本的列表？

1 个答案:

资源