Question

我试图创建一个搜索，它将过滤项目数据库并在搜索输入下方显示匹配选项，因此用户可以选择“有效”选项。我正在获得被过滤物品的效果。但是，当搜索栏为空时，它会显示该集合中的所有项目。有没有办法可以阻止这种情况，所以只有在搜索开始后它才显示选项？

HTML

<template name="addItem">
<form class="addNewItem">
<input type="text" class="newItem" name="newItem" placeholder=" + new item">
</form>
<ul>&nbsp;
{{> search}}
</ul>
</template>

<template name="search">
  &nbsp;
  {{#if searchResults.results}}
  {{#each searchResults.results}}
      <li>
      {{itemName}}
      </li>
      {{/each}}
      {{/if}}
</template>

JS

'keyup input.newItem': function (evt) {
      Session.set('search-query', evt.currentTarget.value);
      var search = Session.get('search-query');
      console.log(search);
    },

});

  Template.search.helpers({
    searchResults: function (){
    var keyword  = Session.get('search-query');
    var query = new RegExp( keyword, 'i' );
    var results = Equipment.find({'itemName': query}, {});
    return {results: results}; 
  }
  });

Answer 1

在模板中添加if块：

<template name="addItem">
<form class="addNewItem">
<input type="text" class="newItem" name="newItem" placeholder=" + new item">
</form>
<ul>&nbsp;
{{#if searchInputNotEmpty}}
{{> search}}
{{/if}}
</ul>
</template>

并添加searchInputNotEmpty帮助程序，以检查您已设置的search-query会话变量：

Template.addItem.helpers({
  searchInputNotEmpty: function() {
    var input = Session.get('search-query');
    return input != null && input != '';
  }
});

我如何使用流星搜索集合，并且仅显示匹配结果？

1 个答案: