所以我正在使用Materialziecss和第三方库来输入标签
Materializecss：http：//materializecss.com/
物化标签库：http : //henrychavez.github.io/materialize-tags/examples/
现在，根据标签输入库的文档，如果您愿意包括自动完成的typeahead功能，则需要包括typeahead.js库。
他们推荐的一个是http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js
我正在尝试应用该库，但是无法正常运行。我的代码如下
$(document).ready(function() {
$('select').material_select();
$('#en_tags').materialtags({
typeahead: {
source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
}
});
});
提前致谢
该文档似乎有错字。“ typeahead”应为“ typeaheadjs”。同样，仅将数组作为源似乎没有用。相反，猎犬图书馆对我来说很好。
var dummyTags = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: ['dummy', 'tags', 'galore']
});
$('#tag-input').materialtags({
typeaheadjs: {
source: dummyTags
}
});
最后，最新的typeahead版本将元素的类名称从“ tt-dropdown-menu”更改为“ tt-menu”，因此不应用实体化样式。您需要将其放在样式表中，以覆盖物化选择器样式。
.tt-menu {
min-width:200px;
max-width:100%;
padding:10px 0;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background:#fff;
-webkit-box-shadow:0 2px 5px rgba(0,0,0,.35);
-moz-box-shadow:0 2px 5px rgba(0,0,0,.35);
box-shadow:0 2px 5px rgba(0,0,0,.35)
}
.materialize-tags .tt-menu .tt-suggestion {
line-height:1.1rem !important;
padding:2px 10px !important
}
.materialize-tags .tt-menu .tt-cursor {
background:#03a9f4;color:#fff
}
京公网安备 11010802040832号 | 京ICP备19059560号-6 