如何使用 Typeahead.js 隐藏 div

【问题标题】：How to use Typeahead.js to hide divs如何使用 Typeahead.js 隐藏 div
【发布时间】：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。

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

【问题讨论】：

标签： jquery html laravel typeahead.js

【解决方案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：很高兴它有帮助。如果您对解决方案感到满意，请不要忘记接受答案。