Question

我对Materialize的自动完成表格有疑问。我正在卡中使用它。但是选项不会立即显示。例如，输入“ 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

我已经分叉并更新了您制造的笔，这是代码笔的链接：

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

实现-自动完成功能不会立即显示选项

2 个答案: