Materialise - 自动完成不会立即显示选项

Question

我对 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

Answer 1

我已经 fork 并更新了你制作的 Pen，这里是 codepen 的 link：

codepen.io/immad-hamid/pen/ajBjXx

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

Answer 2

请使用这些新版本的 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

Materialise - 自动完成不会立即显示选项

Materialize - Autocomplete does not show options instantly

javascript

autocomplete

materialize