Uncaught TypeError: $ (...). EasyAutocomplete не является функцией - PullRequest
0 голосов
/ 04 октября 2018

Я создаю веб-приложение с использованием Node js и express.Для автозаполнения я использую сторонний модуль узла под названием easy-autcomplete .Я следовал за документацией и включил все файлы, однако я получаю следующую ошибку

Uncaught TypeError: $(...).easyAutocomplete is not a function
    at HTMLDocument.<anonymous> (post-property.js:289)
    at mightThrow (jquery-3.3.1.js:3534)
    at process (jquery-3.3.1.js:3602)

post-property.js

$(function(){

    let countries = [
        {"name": "Afghanistan", "code": "AF"},
        {"name": "Albania", "code": "AL"},
        {"name": "Algeria", "code": "DZ"},
..
..
    ]
    var options = {
        data: countries,

        getValue: "name",

        list: {
            match: {
                enabled: true
            }
        }
    };
    $("#provider-json").easyAutocomplete(options);

});

post-property.hbs

<div class="row">
    ..
    ..
</div>
<script src="/javascripts/post-property.js"></script>

<script src="/scripts/jquery.easy-autocomplete.min.js"></script>
<link rel="stylesheet" href="/scripts/easy-autocomplete.css">
<link rel="stylesheet" href="/scripts/easy-autocomplete.themes.min.css">

app.js

...
app.use('/scripts', express.static(__dirname + '/node_modules/easy-autocomplete/dist/'));
...

Я проверил различные решения, в которых мне пришлось перенести файл из узловых модулей.папка однако ошибка сохранилась.

Ответы [ 2 ]

0 голосов
/ 04 октября 2018

Вы должны переместить скрипт и CSS для легкого автозаполнения перед вашим собственным скриптом.

let countries = [
    {"name": "Afghanistan", "code": "AF"},
    {"name": "Albania", "code": "AL"},
    {"name": "Algeria", "code": "DZ"},
]
var options = {
    data: countries,

    getValue: "name",

    list: {
        match: {
            enabled: true
        }
    }
};
$("#basics").easyAutocomplete(options);
<head>
  <link rel="stylesheet" href="/scripts/easy-autocomplete.css">
  <link rel="stylesheet" href="/scripts/easy-autocomplete.themes.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js"></script>
  <script src="/javascripts/post-property.js"></script>
</head>
<body>
  <div class="row">
      <input id="basics" />
  </div> 
</body>

Тогда не забудьте включить скрипт jQuery, как упомянуто в документации

0 голосов
/ 04 октября 2018

Вам нужно загрузить плагин / библиотеку перед вашим пользовательским кодом, иначе он не будет существовать.jQuery также необходимо включить перед обоими из этих scripts.

Попробуйте следующее:

<script src="/scripts/jquery.easy-autocomplete.min.js"></script>
<script src="/javascripts/post-property.js"></script>
...