如何使用自动完成取消隐藏 table 行

Question

我有一个输入 table 是这样的：

<td valign="top" style = "padding: 12px 0px 0px 30px;" >  
    <div class="form-group">
        <label for="inputlg">Enter your favorite fruit :</label>
        <input class="form-control input-lg" id="inputlg" type="text">
        <table style="display: none;">
            <tr>
                <td> <a href="#">apple</a> </td>
            </tr>
            <tr>
                <td> <a href="#">mango</a> </td>
            </tr>
            <tr>
                <td> <a href="url">carrot</a> </td>
            </tr>
        </table>
    </div>
</td>

我想在用户输入 "app" 时取消隐藏 "apple" link 并在用户输入 "man" 时取消隐藏 "mango" link等等..我用谷歌搜索了这个问题，但找不到任何令人满意的东西。我需要什么样的 JavaScript 代码才能实现这一目标？谢谢

Answer 1

你可以这样做：

首先将 table 的每一行映射到一个对象中（其中键是该行的文本内容，值是该行本身），以便您以后可以快速访问它。然后向输入添加一个事件侦听器，当用户输入内容时，通过对象查看其任何属性是否与值匹配，使用对象 show/hide 元素。

let element, elements, i, input, n, tableBody;

elements = {};
tableBody = document.getElementById(`table-body`);
for (i = tableBody.children.length - 1; i > -1; i--) {
    element = tableBody.children[i];
    elements[element.textContent.trim()] = element;
}

input = document.getElementById(`inputlg`);
input.addEventListener(`input`, filterElements);

function filterElements() {
    let key, value;
    value = input.value;
    for (key in elements) {
        if (key.match(value)) {
            elements[key].classList.add(`show`);
        } else {
            elements[key].classList.remove(`show`);
        }
    }
}

#table-body >* {
    display: none;
}

.show {
    display: block !important;
}

<td valign="top" style = "padding: 12px 0px 0px 30px;" >
    <div class="form-group">
        <label for="inputlg">Enter your favorite fruit :</label>
        <input class="form-control input-lg" id="inputlg" type="text">
        <table>
            <tbody id="table-body">
                <tr>
                    <td>
                        <a href="#">apple</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#">mango</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="url">carrot</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</td>

Answer 2

您可以通过编写更多代码来实现此目的，如下所示。

$("#inputlg").keyup(function() {
      var value = $(this).val();
      console.log(value);
      if (value == 'app') {
        $('.app').attr('style', 'display:block');
      } else {
        $('.app').attr('style', 'display:none');
      }
      if (value == 'mon') {
        $('.mon').attr('style', 'display:block');
      } else {
        $('.mon').attr('style', 'display:none');
      }
      if (value == 'car') {
        $('.car').attr('style', 'display:block');
      } else {
        $('.car').attr('style', 'display:none');
      }
    })

注意：- 我刚刚添加了 class 特别是锚标记以帮助您。添加相同的代码片段。

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>

    <label for="inputlg">Enter your favorite fruit :</label>
    <input class="form-control input-lg" id="inputlg" type="text">
    <table >
      <tr>
        <td>
          <a href="#" class ="app" style="display:none">apple</a>
        </td>
      </tr>
      <tr >
        <td>
          <a href="#" class="mon" style="display:none">mango</a>
        </td>
      </tr>
      <tr class="car" style="display:none">
        <td>
          <a href="url">carrot</a>
        </td>
      </tr>
    </table>
    <script>
      $(document).ready(function() {
        $("#inputlg").keyup(function() {
      var value = $(this).val();
      console.log(value);
      if (value == 'app') {
        $('.app').attr('style', 'display:block');
      } else {
        $('.app').attr('style', 'display:none');
      }
      if (value == 'mon') {
        $('.mon').attr('style', 'display:block');
      } else {
        $('.mon').attr('style', 'display:none');
      }
      if (value == 'car') {
        $('.car').attr('style', 'display:block');
      } else {
        $('.car').attr('style', 'display:none');
      }
      })
      })

    </script>
  </body>

</html>

如何使用自动完成取消隐藏 table 行

How to unhide table rows with autocomplete

html

javascript

html-table

show-hide