Meteor 0.6.5.1 和 twitter typeahead.js -(如何)工作? [英] Meteor 0.6.5.1 and twitter typeahead.js - (How) does it work?
问题描述
我从 Twitter Bootstrap 2 切换到 Bootstrap 3，发现自己没有 typeahead，建议现在使用 Twitter typeahead.js.相应的
关于如何在meteor中做到这一点.在你渲染的函数中，填写 typeahead
var items = [],最终项目，tags = Tags.find({}, {fields: {name: 1, submit: 0}});标签.forEach(功能(标签){items.push(tag.name);});finalItems = _.uniq(items)$('#search').typeahead({本地:finalItems});然后，在 keyup 事件中，执行
$('.tt-query').css('background-color','#fff');$('#search').removeClass('tt-query');并在您的 css 中添加
.twitter-typeahead{宽度:100%；}.twitter-typeahead .tt-query,.twitter-typeahead .tt-hint {底边距:0；}.tt-下拉菜单{最小宽度:160px；边距顶部:2px；填充:5px 0;背景色:#fff;边框:1px 实心 #ccc；边框:1px 实心 rgba(0,0,0,.2)；*border-right-width: 2px;*边框底部宽度:2px；-webkit-border-radius: 6px;-moz-border-radius: 6px;边框半径: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:填充框；-moz-background-clip:填充；背景剪辑:填充框；}.tt-建议{显示:块；填充:3px 20px；}.tt-suggestion.tt-is-under-cursor {颜色:#fff;背景色:#0081c2；背景图像:-moz-线性渐变(顶部，#0088cc，#0077b3)；背景图片:-webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));背景图像:-webkit-线性梯度(顶部，#0088cc，#0077b3)；背景图像:-o-线性梯度(顶部，#0088cc，#0077b3)；背景图像:线性渐变(到底部，#0088cc，#0077b3)；背景重复:重复-x；过滤器:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)}.tt-suggestion.tt-is-under-cursor a {颜色:#fff;}.tt-建议 p {边距:0；}这很笨拙，但它会一直工作，直到他们让 Typeahead 和 Bootstrap 3 相互配合.
I switched from Twitter Bootstrap 2 to Bootstrap 3 and found myself without typeahead, it's recommended to use Twitter typeahead.js now. The corresponding meteor package seems to be up to date in terms of typeahead.js, but probably has been outdated by the latest updates of meteor. For me, it doesn't work correctly.
Does somebody know how to run typeahead.js in Meteor or confirm I'm just using it wrong?
From my code I get this messed up typahead formatting:
Thanks for any hint!
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']
});
};
}
I was able to get this to work using the answer from here https://stackoverflow.com/a/18171568/1691147
In regards to how to do it in meteor. In your rendered function, fill up typeahead
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
});
Then, on a keyup event, do
$('.tt-query').css('background-color','#fff');
$('#search').removeClass('tt-query');
And in your css, add
.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;
}
It's pretty hacky, but it will work until they get Typeahead and Bootstrap 3 to play nicely with each other.
这篇关于Meteor 0.6.5.1 和 twitter typeahead.js -(如何)工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
