简体   繁体   English

使用流星自动完成包搜索(mizzao)

[英]Searching with meteor autocomplete package (mizzao)

I am new to Javascript and Meteor and having some trouble getting the Meteor autocomplete package from Mizzau to work correctly. 我是Java和Meteor的新手,因此无法从Mizzau获取Meteor自动完成程序包以使其正常工作。 I can get the form to autocomplete just fine, but having trouble getting it to filter my todos. 我可以让表单自动完成就好了,但是很难过滤到我的待办事项。 The end result I am hoping for is to enter in a todo into the autocomplete and have it filter the subscription, I would also settle for search and going from there. 我希望最终的结果是在自动完成中输入待办事项并过滤订阅,我也将进行搜索并从那里开始。 I will also say my initial state is the list returns 0 todos (none are displayed) I feel like I may be close. 我还要说我的初始状态是列表返回0个待办事项(未显示),我感觉自己可能已经关闭。 A good part of my code came from this: Meteor - autocomplete with "distinct" feature? 我的代码有很大一部分来自于此: 流星-具有“独特”功能的自动完成功能? T Does it have something to do with my subscription? T是否与我的订阅有关?

Here is my server side publish call: 这是我的服务器端发布调用:

    Meteor.publish("todosAuto", function(selector, options) {
  Autocomplete.publishCursor(Todos.find(selector, options), this);
  this.ready();
});

My client side subscription: 我的客户端订阅:

Meteor.subscribe('todosAuto');

The relevant part of my template: 我模板的相关部分:

<div class="container todoFormSec">
    <div class="col-md-4">
      {{> inputAutocomplete settings=settings id="msg" class="form-control" placeholder="Search..."}}
    </div>
  <div class="row">
    <div class="col-md-5 pull-right">
      <h1 class="todocountstyle text-right">You Have {{ todoCount }} Todos</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="todos">
          {{ #each todosAuto }}
              {{ >todo }}
          {{ /each }}
      </div>
      </div>
  </div>
</div>

And my settings: 和我的设置:

Template.home.helpers({

  todos: function() {
  return Todos.find();
},


todoCount: function() {
  return Todos.find({userid: Meteor.userId()}).count();
},

  settings: function() {
    return {
      position: "top",
      limit: 5,
      rules: [
        {
          token: '@',
          collection: 'Todos',
          field: "title",
          subscription: 'todosAuto',
          template: Template.titlePill
        },
        {
          token: '#',
          collection: 'Todos',
          field: "categories",
          options: '',
          subscription: 'todosAuto',
          matchAll: true,
          template: Template.dataPiece
        }
      ]
    };
  }

});

Template.home.events({ // listen for selection and subscribe
  "autocompleteselect input": function(event, template, doc) {

   Meteor.subscribe("todosAuto", doc.title);
  }
});

In the past I tried to use this autocomplete package you are having trouble with. 过去,我尝试使用您遇到麻烦的此自动完成程序包。 I found it just wasn't high fidelity enough for my needs. 我发现它的保真度不足以满足我的需求。 Therefore I recommend Twitter typeahead and bloodhound to you. 因此,我向您推荐Twitter typeaheadbloodhound I am very happy with the following packages ajduke:bootstrap-tokenfield in combination with sergeyt:typeahead 我对以下软件包ajduke:bootstrap-tokenfieldsergeyt: typeahead相结合感到非常满意

The time investment is well worth it. 时间投资是值得的。 See my previous posting for examples. 有关示例,请参见我以前的帖子 Here are more examples. 这里有更多例子。

If the above is too complicated, try jeremy:selectize . 如果以上内容太复杂,请尝试jeremy:selectize Point is that there are plenty of better packages out there. 关键是那里有很多更好的软件包。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM