Question

所以我使用Materialziecss和第三方库进行标签输入

Materialisecss：http://materializecss.com/
物化标签库：http://henrychavez.github.io/materialize-tags/examples/

现在根据标签输入库的文档，如果您愿意为自动完成包含预先输出功能，则需要包含一个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>

提前致谢

Answer 1

文档似乎有拼写错误。＆＃34;预输入＆＃34;应该是＆＃34; typeaheadjs＆＃34;。还有一个数组作为源似乎不起作用。相反，猎犬库对我来说效果很好。

foo/
    __init__.py
    foo.py
    ...
scripts/
     foo_script.py
setup.py

最后，最新的typeahead版本更改了＆＃34; tt-dropdown-menu＆＃34;中的元素的类名称。到＆＃34; tt-menu＆＃34;，因此不应用实体样式。您希望将其放在样式表中以覆盖实现选择器样式。

var dummyTags = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: ['dummy', 'tags', 'galore']
});
$('#tag-input').materialtags({
  typeaheadjs: {
    source: dummyTags
  }
});

Materialisecss - 使用Typeahead.js输入的标签

1 个答案: