自动完成MaterialiseCSS在流星中不起作用

时间:2017-07-20 04:54:43

标签: javascript jquery meteor materialize

我使用了来自Autocomplete MaterializeCSS的Materialisecss的自动完成标签。但它在Meteor中对我不起作用。 我的代码在这里(它与MaterialiseCSS几乎相同):



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>
&#13;
&#13;
&#13;

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

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)

1 个答案:

答案 0 :(得分:0)

// 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.
        });
    });

aotocomplete JS代码换行$(document).ready(function() {}) 还需要导入jQueryUI(js和css)