Materializecss - 使用 Typeahead.js 输入标签答案

【问题标题】：Materializecss - Tags input with Typeahead.jsMaterializecss - 使用 Typeahead.js 输入标签
【发布时间】：2016-04-03 02:55:58
【问题描述】：

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

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

现在根据标签输入库的文档，如果你愿意包含自动完成的提前输入功能，你需要包含一个 typeahead.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.js html-input materialize

【解决方案1】：

文档似乎有错字。 “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
}

【讨论】：