Materialize - 自动完成不会立即显示选项答案

【问题标题】：Materialize - Autocomplete does not show options instantlyMaterialize - 自动完成不会立即显示选项
【发布时间】：2018-07-20 05:51:39
【问题描述】：

我对 Materialise 的自动完成表单有疑问。我在卡内使用它。但选项不会立即显示。例如，在输入“G”时，自动填充表单应建议“Google”。但事实并非如此。只有在表单上单击鼠标，才会显示自动完成选项。但我找不到错误。

HTML（此页面上只有一个自动完成表单）：

   <div id="referenceSetCard"  class="row">>
        <div class="col s12 m4 l4 offset-m4 offset-l4">
            <div class="card over-all">
                <!-- Title -->
                <div class="card-action red darken-4 white-text">
                    <h4>Header</h4>
                </div>
                <!-- Content -->
                <div class="card-content">
                    <p>Text</p>
                    <!-- Input field -->
                    <div class="form-field">
                        <div class="input-field">
                            <input id="referenceDataInput" type="text" class="autocomplete">
                            <label for="referenceDataInput">Autocomplete</label>
                        </div>
                    </div>
                    <!-- Buttons -->
                    <div class="card-action">
                        <a id="buttonConfirm" class="waves-effect waves-light btn red hide-on-med-and-down">
                            Confirm
                        </a>
                        <a id="buttonCancel" class="waves-effect waves-light btn red hide-on-med-and-down">
                            Cancel
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

JS：

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

看看吧：

https://codepen.io/michaelkonstreu/pen/zLoaJE

【问题讨论】：

标签： javascript autocomplete materialize

【解决方案1】：

请使用这些新版本的 cdnjs 或缩小的脚本。

 <!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

您还可以更改minLength 的值，例如当您希望自动完成下拉菜单弹出时。

Codepen of Autocomplete with V 1.0.0-rc.2

Codepen of your code with V 1.0.0-rc.2

【讨论】：

谢谢。意识到我使用的是 1.0.0-rc.1，所以使用 rc.2 和 jq 3.3.1 它对我有用。
我也在改变诸如 minLength 和其他东西之类的东西，但没有检查脚本的版本，也没有通过改变它来工作 XD

【解决方案2】：

我已经分叉并更新了你制作的 Pen，这里是 codepen 的链接：

codepen.io/immad-hamid/pen/ajBjXx

我已经更改了脚本的版本，它现在可以工作了。可能是 jQuery 版本的问题。现在您有了一个工作演示，因此您可以尝试更改版本。

【讨论】：

你已经降级了脚本的版本，为什么要使用旧版本，如果旧版本有其他部分的错误怎么办？
是的，问题是我们应该跟上脚本的新版本，旧版本因为有错误而被丢弃。
在我的回答中，我告诉问问题的人你有一个工作演示，现在你可以玩并更改版本......无论如何它现在工作了，祝你好运......