如何使用自动完成取消隐藏表格行答案

【问题标题】：How to unhide table rows with autocomplete如何使用自动完成取消隐藏表格行
【发布时间】：2018-03-12 12:17:09
【问题描述】：

我有这样的输入和表格：

<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”链接，并在用户输入“man”时取消隐藏“mango”链接等等。我用谷歌搜索了这个问题，但我找不到任何令人满意的东西.我需要什么样的 JavaScript 代码来实现这一点？谢谢。

【问题讨论】：

我已经发布了一个答案，你可以检查一下，如果它解决了你的问题，请告诉我。如果没有解决，我会尝试更多的解决方案。

标签： javascript html html-table show-hide

【解决方案1】：

你可以这样做：

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

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>

【讨论】：

【解决方案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');
      }
    })

注意：- 我刚刚添加了类，特别是锚标记以供您帮助。为相同添加代码sn-p。

<!--
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>

【讨论】：