Materialize.css 自动完成功能不适用于 Polymer答案

【问题标题】：Materialize.css autocomplete not working with PolymerMaterialize.css 自动完成功能不适用于 Polymer
【发布时间】：2016-07-27 19:38:37
【问题描述】：

我正在尝试在我的 Polymer 项目中使用 Materialize.css autocomplete。

控制台日志：

Uncaught TypeError: $(...).autocomplete is not a function

我的代码：

<div class="input-field">
    <input type="text" id="assemp" class="autocomplete" value="{{emps::input}}">
    <label for="assemp">Assigned Employee(s)</label>
</div>

脚本：

attached : function() {
            $('input.autocomplete').autocomplete({
                data: {
                    "Apple": null,
                    "Microsoft": null,
                    "Google": 'http://placehold.it/250x250'
                }
            });
        }

【问题讨论】：

您是否在 HTML 中加载物化 JavaScript 脚本？见materializecss.com/getting-started.html
我遇到了同样的问题
你应该阅读TypeError: "x" is not a function
您可以使用 stackoverflow.com/a/43133503/3295819 找到自动完成的答案

标签： javascript jquery polymer polymer-1.0 materialize

【解决方案1】：

 $(document).ready(function () {$('input.autocomplete').autocomplete({
            data: {
                "Apple": null,
                "Microsoft": null,
                "Google": null
            }});});

【讨论】：

请解释一下你的答案
在jquery函数中加入自动完成
@Liam 我有同样的问题，这对我来说是正确的答案。原因是 materialize.js 文件在 $(document).ready 块内加载了自动完成插件，所以如果您在加载文档之前尝试使用自动完成功能，它将不会被定义。我对芯片（material_chip 插件）也有同样的问题，如果指定，它又会使用自动完成。

【解决方案2】：

确保您加载的是最新的 materialize.js 文件。我有一个旧版本，其中自动完成插件不在 JS 中，它抛出了同样的错误。更新后就走了。但是我仍然无法让自动完成功能正常工作。 :(

【讨论】：

【解决方案3】：

我在 react 中遇到了类似的问题。如果我在 jquery 中执行代码，它似乎可以工作。

$(() => {
  $(...).autocomplete();
});

【讨论】：

【解决方案4】：

我的解决方法：

复制功能：

/**************************
* Auto complete plugin  *
*************************/

$.fn.autocomplete = function (options) {
// Defaults
var defaults = {
    data: {}
};

options = $.extend(default

(...)

}); // End of $(document).ready (1)

/*******************
 *  Select Plugin  *
 ******************/

来自materialize.js（行号~3000）要么来自源文件 /js/forms.js（行号 ~281）

删除最后一行：

}); // End of $(document).ready (1)

它关闭功能开始更多之前...

并将其手动放入您的 javascript 函数体中

$(document).ready(function() { 
//paste it here
})

【讨论】：

【解决方案5】：

我的问题通过将我的 jQuery 版本降级到 V2.1.4 作为 Materialize CSS 使用得到解决。

【讨论】：

请注意，这在文档中没有明确说明。停止库依赖的另一个原因。

【解决方案6】：

是的，正如Wesley Williams` 之前提到的，Materialize JS 文件的版本很重要！我有这个 0.97.3 版本的 js 文件，但我永远无法得到一个简单的标准示例。

最后发现这个版本不支持autocomplete这个功能，所以我只好升级到最新版本，效果很好。

【讨论】：