仅在搜索模式下显示结果答案

【问题标题】：Show results only on search mode仅在搜索模式下显示结果
【发布时间】：2019-03-17 15:20:23
【问题描述】：

我正在使用库 ListJs 执行 模糊搜索 并且运行良好，但只有一个问题，我希望结果仅在用户搜索时显示而不显示全部结果文档的大多数示例如何显示。

我找不到任何我正在寻找的示例，ListJs 是否有可能提供一个选项，使结果仅在一种搜索模式下可用？

HTML：

<div id="sandbox">
    <input class="form-control form-control-lg fuzzy-search" placeholder="Search" />     
    <ul class="list" id="list"></ul>
</div>

JS：

var options = {
    valueNames: [ 
        'productTitle', 
        'productBrand', 
        { name: 'productImage', attr: 'src' }
    ],
    item: '<li>
             <img src="" class="img-fluid productImage" style="height: 100px;" alt="#" />
             <h3 class="productTitle"></h3>
             <p class="productBrand"></p>
           </li>'
};

var userList = new List('sandbox', options);

$.getJSON( "data.json", function( data ) {
    userList.add(data);
});

【问题讨论】：

标签： javascript fuzzy-search listjs

【解决方案1】：

好的，所以我不确定我是否理解你想要什么，但我会试一试，因为你还没有得到一个答案。

我认为你想要什么： 默认情况下，列表是隐藏的。当用户关注搜索字段时，会显示列表。失去焦点时，列表再次隐藏。

你可以用一些 js 来解决这个问题（你可以使用 jquery 作为选择器和 hide() show() 方法）：

HTML：

<div id="users">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort by name
  </button>

  <ul class="list">
    <li>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
    </li>
    <li>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>
    </li>
  </ul>

</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

JS :

// Listjs
var options = {
  valueNames: [ 'name', 'born' ]
};

var userList = new List('users', options);

// Show/hide on focus
var searchField = document.getElementsByClassName('search')[0];
var listDiv = document.getElementsByClassName('list')[0];

// Hide the list by default 
listDiv.style.visibility = 'hidden';

document.addEventListener('DOMContentLoaded', function() {
    searchField.addEventListener('focus', function() {
        // Search input focused
      listDiv.style.visibility = 'visible';
    });
});

document.addEventListener('DOMContentLoaded', function() {
    searchField.addEventListener('focusout', function() {
        // Search input not focused
      listDiv.style.visibility = 'hidden';
    });
});

这是一个指向codepen 的链接，该示例基于另一个listjs 网站示例。
希望这会有所帮助，干杯！

【讨论】：