如何使用 Typeahead.js 隐藏 div

Posted 2023-03-14

【中文标题】如何使用 Typeahead.js 隐藏 div

【英文标题】：How to use Typeahead.js to hide divs

【发布时间】：2015-12-19 08:42:29

【问题描述】：

我有一个 Laravel 站点，显示如下：

<input class="typeahead" type="text">

<div id="nameName">
    <p>Name Name</p>
</div>

<div id="anotherName">
    <p>Another Name</p>
</div>

<div id="thirdName">
    <p>Third Name</p>
</div>

我希望使用Typeahead.js来搜索真实姓名并立即隐藏不相关的div。

例如，我搜索“thi”并在 keyup div 上隐藏 nameName 和 anotherName。

我找不到任何可以证明这种行为的示例。我将如何实现这一目标？

【参考方案1】：

如果您想在文本值为空时显示所有 div。

 $('.typeahead').keyup(function()
  var txtvalue = this.value;
  txtvalue.length ? $('div').hide().filter(function()
     return $(this).text().toLowerCase().indexOf(txtvalue) > 0;
  ).show() : $('div').show();
);

Working demo for update

【讨论】：

当输入为 null 时，他可能还想做一个 foreach 以再次显示所有 div（它会从列表中删除所有内容）

隐藏 div 效果很好，但这是搜索 div id 而不是实际名称 - 并且没有使用 Typeahead.js！即，搜索“ird”或以大写字母开头不会显示第三个

更好，谢谢。我喜欢它的简单。我将尝试将它与 Typeahead.js 集成

@MikeThrussell：很高兴它有帮助。如果您对解决方案感到满意，请不要忘记接受答案。