1

我从 Twitter Bootstrap 2 切换到 Bootstrap 3，发现自己没有 typeahead，建议现在使用 Twitter typeahead.js。就typeahead.js而言，相应的流星包似乎是最新的，但可能已因流星的最新更新而过时。对我来说，它不能正常工作。

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

从我的代码中，我得到了这种混乱的打字格式：

打乱了预输入格式

感谢您的任何提示！

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']
        });
  };
}
4

2 回答 2

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 可以很好地相互配合之前，它会起作用。

于 2013-09-16T04:24:23.153 回答
0

如果您正在使用一般的自由文本自动完成功能，您可能想查看我的流星自动完成包，几天前首次发布：

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

你也可以从那里得到一些关于你想做的事情的灵感。我强烈建议使用 Meteor 集合支持的实现，而不是尝试使用现有的异步库拼凑一些东西，这就是我在这里所做的。这允许自动完成完全响应式和客户端（列表内容可以在您查看它们时更新！）并且更快。

下面几张图...

  1. 使用 自动完成用户@，其中在线用户显示为绿色：

    在此处输入图像描述

  2. 在同一行中，使用元数据和引导图标自动完成其他内容：

    在此处输入图像描述

请分叉、拉动和改进！

于 2013-09-24T13:42:42.707 回答