Question

我从Twitter Bootstrap 2切换到Bootstrap 3并发现自己没有预先输入，建议现在使用Twitter typeahead.js。相应的meteor package似乎是最新的typeahead.js，但可能已经过了最新的流星更新。对我来说，它无法正常工作。

有人知道如何在Meteor中运行typeahead.js或确认我只是错误使用它吗？

从我的代码中我搞砸了typahead格式：

messed up typeahead formatting

感谢任何提示！

typeahead.html

<head>
  <title>typeahead</title>
</head>
<body>
  {{> hello}}
</body>
<template name="hello">
<form class="form-inline" role="form">
    <div class="form-group">
      <input class="form-control" type="text" id="typeahead">
    </div>
</form>
</template>

typeahead.js

if (Meteor.isClient) {
    Template.hello.rendered = function () {
    $('input#typeahead').typeahead({
        name: 'accounts',
        local: ['timtrueman', 'JakeHarding', 'vskarich']
        });
  };
}

Answer 1

我能够使用此处https://stackoverflow.com/a/18171568/1691147

的答案让这个工作

关于如何在流星中做到这一点。在渲染的函数中，填充预先输入

    var items = [],
finalItems,
tags = Tags.find({}, {fields: {name: 1, submitted: 0}});
tags.forEach(function(tag){
    items.push(tag.name);
});
finalItems = _.uniq(items)
$('#search').typeahead({
    local: finalItems
});

然后，在keyup事件上，执行

   $('.tt-query').css('background-color','#fff');
   $('#search').removeClass('tt-query');

在你的CSS中，添加

.twitter-typeahead{
width:100%;
}

.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
  margin-bottom: 0;
}

.tt-dropdown-menu {
  min-width: 160px;
  margin-top: 2px;
  padding: 5px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.2);
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

.tt-suggestion {
  display: block;
  padding: 3px 20px;
}

.tt-suggestion.tt-is-under-cursor {
  color: #fff;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}

.tt-suggestion.tt-is-under-cursor a {
  color: #fff;
}

.tt-suggestion p {
  margin: 0;
}

它非常hacky，但它会一直有效，直到他们让Typeahead和Bootstrap 3相互搭配得很好。

Answer 2

如果您正在使用常规自由文本自动填充功能，那么您可能需要查看我的自动完成程序包for meteor，几天前首次发布：

https://github.com/mizzao/meteor-autocomplete

您可能也会从那里获得一些灵感，因为您正在尝试做什么。我强烈建议使用Meteor集合支持的实现，而不是尝试使用现有的异步库拼凑一些东西，这就是我在这里所做的。这允许自动完成功能完全被动和客户端（列表内容可以在您查看它们时更新！）并且更快。

以下一些图片......

使用@自动填充用户，其中在线用户以绿色显示：
在同一行中，使用元数据和引导程序图标自动填充其他内容：

请分叉，拉动和改进！

Meteor 0.6.5.1和twitter typeahead.js - （How）有效吗？

2 个答案: