meteor-typeahead：列出和选择答案

【问题标题】：meteor-typeahead: Listing and selectingmeteor-typeahead：列出和选择
【发布时间】：2014-11-21 10:16:52
【问题描述】：

我已经通过 npm 安装了 meteor-typeahead。 https://www.npmjs.org/package/meteor-typeahead 我也安装了

meteor add sergeyt:typeahead

来自https://atmospherejs.com/sergeyt/typeahead

我正在尝试使数据源属性示例正常运行，以便在用户开始键入时显示国家/地区列表。我已将所有国家/地区插入集合中：-

Country = new Meteor.Collection('country');

该集合已发布和订阅。

当我在输入字段中输入时，没有出现任何建议。是否与激活 API 有关？如果是这样，我该怎么做？请参考网站https://www.npmjs.org/package/meteor-typeahead

我的表单如下所示：

<template name="createpost">
<form class="form-horizontal" role="form" id="createpost">
        <input class="form-control typeahead" name="country" type="text" placeholder="Country" autocomplete="off" spellcheck="off" data-source="country"/>
        <input  type="submit" value="post">
</form>
</template>

client.js

Template.createpost.helpers({
country: function(){
    return Country.find().fetch().map(function(it){ return it.name; });
} });

【问题讨论】：

标签： node.js meteor

【解决方案1】：

为了使您的输入具有预先输入完成，您需要：

使用包 API 激活 typeahead jQuery 插件
- 在模板呈现的事件处理程序中调用 Meteor.typeahead。
- Meteor.typeahead.inject 调用为页面上可用的 CSS 选择器匹配的元素激活 typeahead 插件（请参阅demo app）。
在你的模板中写入'data-source'函数，可以被预输入插件理解。看来您的“数据源”功能是正确的。
为您的应用程序添加用于预先输入/下拉菜单的 CSS 样式。请参阅演示应用中的示例 here。

【讨论】：

谢谢 Sergeyt，我会按照你提到的步骤进行。
Meteor.typeahead.inject(selector);代码去？对不起，我很困惑。我怎么称呼它？
在 DOM 就绪事件上调用它，即使用 Meteor.startup（演示应用程序有一个 sample call）。或者在模板呈现的事件处理程序中调用它。
如何定义选择器？我把 Meteor.typeahead.inject(selector);进入服务器启动。我收到以下消息 ReferenceError: selector is not defined 。如果您在 github 上创建一个仅包含该函数的代码的文件，会不会太过分了？它可能使我更容易查看代码并了解发生了什么。
@CodeCandy Meteor.typeahead.inject 应该在客户端调用，因为 Meteor.typeahead 包只在浏览器环境中工作。

【解决方案2】：

在您的模板中尝试这种方式：

    <input type="text" name="country" data-source="country"
    data-template="country" data-value-key="name" data-select="selected">

创建类似 country.html 的模板（例如 /client/templates/country.html），其中包含：

<template name="country">
    <p>{{name}}</p>
</template>

在您的客户端javascript中：

Template.createpost.rendered = function() {
    Meteor.typeahead.inject();
}

和

Template.createpost.helpers({
    country: function() {
    return Country.find().fetch().map(function(it){
            return {name: it.name};
        });
    },
    selected: function(event, suggestion, datasetName) {
        console.log(suggestion); //or anything what you want after selection
    }
})

【讨论】：