自动完成 MaterializeCSS 在流星中不起作用答案

【问题标题】：Autocomplete MaterializeCSS doesn't work in meteor自动完成 MaterializeCSS 在流星中不起作用
【发布时间】：2017-12-25 14:32:26
【问题描述】：

我使用了来自 Autocomplete MaterializeCSS 的 Materializecss 的自动完成标签。但它在 Meteor 中对我不起作用。我的代码在这里（与 MaterializeCSS 几乎相同）：

Template.home.onRendered(function(){

if (Meteor.isClient) {

        // your jQuery code here...

  $('input.autocomplete').autocomplete({
    data: {
      "Apple": null,
      "Microsoft": null,
      "Google": 'https://placehold.it/250x250'
    },
    limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
    onAutocomplete: function(val) {
      // Callback function when value is autcompleted.
    },
    minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1.

  });
}

<template name="searchbox">
  <br><br><br>
  <div class="card" style="width: 600px;">
    
    {{#if currentUser}}
      <form action="#">

        <div class="row">
          <div class="col s12">

            <div class="row">
              <div class="input-field col s12">
                <input type="text" id="autocomplete-input" class="autocomplete">
                <label for="autocomplete-input">
                  Pesquisar...
                </label>
              </div>
              <form action="#">
                  <input class="with-gap" name="group1" type="radio" id="test1" checked/>
                  <label for="test1">Alunos</label>
                  <input class="with-gap" name="group1" type="radio" id="test2" />
                  <label for="test2">disciplinas</label>
              </form>
            </div>
          </div>
        </div>
        </form>


    {{/if}}

  </div>

</template>

然后浏览器控制台出现的错误是：

Uncaught TypeError: this.source is not a function
at $.(anonymous function).(anonymous function)._search (http://code.jquery.com/ui/1.10.2/jquery-ui.js:6987:8)
at $.(anonymous function).(anonymous function)._search (http://code.jquery.com/ui/1.10.2/jquery-ui.js:401:25)
at $.(anonymous function).(anonymous function).search (http://code.jquery.com/ui/1.10.2/jquery-ui.js:6979:15)
at $.(anonymous function).(anonymous function).search (http://code.jquery.com/ui/1.10.2/jquery-ui.js:401:25)
at $.(anonymous function).(anonymous function).<anonymous> (http://code.jquery.com/ui/1.10.2/jquery-ui.js:6960:10)
at handlerProxy (http://code.jquery.com/ui/1.10.2/jquery-ui.js:730:6)

【问题讨论】：

标签： javascript jquery meteor materialize

【解决方案1】：

// Initialize Auto Complete
    // Need jQueryUI
    $(document).ready(function () {
        $('input.autocomplete').autocomplete({
            data: {
                "Apple": null,
                "Microsoft": null,
                "Google": 'https://placehold.it/250x250'
            },
            limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
            onAutocomplete: function (val) {
                // Callback function when value is autcompleted.
            },
            minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1.
        });
    });

自动完成 JS 代码包装在 $(document).ready(function() {}) 还需要导入 jQueryUI（js 和 css）

【讨论】：