Abd*_*man 2 html-input materialize typeahead.js
所以我正在使用Materialziecss和第三方库来输入标签
现在，根据标签输入库的文档，如果您愿意包括自动完成的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']
}
});
});<head>
<link rel="stylesheet" href="<?php echo base_url('assets')?>/css/materialize-tags.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script src="<?php echo base_url('assets')?>/js/materialize-tags.min.js"></script>
<script src="<?php echo base_url('assets')?>/js/typeahead.js"></script>
</head>
<body>
<div class="input-field">
<label for="en_tags">English Tags</label>
<input type="text" name="en_tags" id="en_tags" value="" data-role="materialtags"/>
</div>
</body>提前致谢
该文档似乎有错字。“ 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
}