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

我有这样一个输入和表：

<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代码来实现这一点？谢谢。

您可以这样做：

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

let元素，元素，i，输入，n，表体；
元素={}；
tableBody=document.getElementById（`tableBody`）；
对于（i=tableBody.children.length-1；i>-1；i--）{
元素=表体.子项[i]；
元素[element.textContent.trim（）]=element；
}
input=document.getElementById（`inputlg`）；
addEventListener（`input`，filterElements）；
函数filterElements（）{
让重点、价值；
value=input.value；
用于（关键要素）{
if（键匹配（值））{
元素[key].classList.add（`show`）；
}否则{
元素[key].classList.remove（`show`）；
}
}
}

#表体>*{
显示：无；
}
.表演{
显示：块！重要；
}

输入您喜爱的水果：

您可以通过编写更多的代码来实现这一点，如下所示

$("#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');
      }
    })

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

输入您喜爱的水果：
$（文档）.ready（函数（）{
$（“#inputlg”）.keyup（函数（）{
var值=$（this.val（）；
console.log（值）；
如果（值=='app'）{
$（'.app'）.attr（'style'，'display:block'）；
}否则{
$（'.app'）.attr（'style'，'display:none'）；
}
如果（值='mon'）{
$（'.mon'）.attr（'style'，'display:block'）；
}否则{
$（'.mon'）.attr（'style'，'display:none'）；
}
如果（值=='car'）{
$（'.car'）.attr（'style'，'display:block'）；
}否则{
$（'.car'）.attr（'style'，'display:none'）；
}
})
})

我已经发布了一个答案，您可以检查一下，让我知道您的问题是否得到了解决。如果没有得到解决，我将尝试更多的解决方案。