流量反應搜索欄，在未聚焦時顯示所有結果

Question

我正試圖在我的流星項目中實現一個簡單的搜索選項，但我從來沒有任何搜索欄的經驗。 我的模板目前列出了一個集合中的所有元素，我希望我的搜索欄可以反應性地聚合這些結果。

我已經能夠通過簡單的搜索包實現這一結果，但這是我的問題開始的地方。
使用簡單搜索，除非我開始在搜索框中輸入，否則無法顯示任何結果。 外部包的問題在於它們真的很難編輯，我不知道如何添加像這樣的選項或自定義搜索欄。

我已經嘗試過關注搜索源包，但教程是針對特定包搜索解釋的，我不知道如何將其調整到我的項目。

再一次。 我想在我的列表中添加一個搜索欄，但是如果我沒有使用它，我希望列出所有元素，如果沒有任何匹配則不需要。

Answer 1

看看我放在一起的這個meteorpad 。 完整代碼如下：

客戶機/ main.html中：

<body>
  {{> main}}
</body>

<template name="main">
  <div><input id="search" placeholder="Search"></div>

  {{> foodList}}
</template>

<template name="foodList">
  <ul>
    {{#each foods}}
      <li>{{name}}</li>  
    {{/each}}
  </ul>
</template>

LIB / collections.js：

Foods = new Mongo.Collection('foods');

客戶機/ app.js：

Template.foodList.helpers({
  foods: function () {
    var regexp = new RegExp(Session.get('search/keyword'), 'i');
    return Foods.find({name: regexp});
  }
});

Template.main.events({
  'keyup #search': function(event) {
    Session.set('search/keyword', event.target.value);
  }
});

服務器/ app.js：

Meteor.startup(function() {
  if (Foods.find().count() === 0) {
    Foods.insert({name: 'Blueberries'});
    Foods.insert({name: 'Strawberries'});
    Foods.insert({name: 'Steak'});
    Foods.insert({name: 'Eggs'});
  }
});

流量反應搜索欄，在未聚焦時顯示所有結果

問題描述

1 個解決方案

解決方案1
7 已采納 2015-08-18 07:34:39

客戶機/ main.html中：

LIB / collections.js：

客戶機/ app.js：

服務器/ app.js：

流量反應搜索欄，在未聚焦時顯示所有結果

問題描述

1 個解決方案

解決方案1 7 已采納 2015-08-18 07:34:39

客戶機/ main.html中：

LIB / collections.js：

客戶機/ app.js：

服務器/ app.js：

解決方案1
7 已采納 2015-08-18 07:34:39