Question

我已经通过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; });
} });

Answer 1

为了让您的输入完成预先输入，您需要：

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

Answer 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
    }
})

meteor-typeahead：列出并选择

2 个答案: