selectize - 未捕获的类型错误：$(...).selectize 不是函数答案

【问题标题】：selectize - Uncaught TypeError: $(...).selectize is not a functionselectize - 未捕获的类型错误：$(...).selectize 不是函数
【发布时间】：2019-11-05 19:21:15
【问题描述】：

我正在尝试在我的 web 应用程序中使用独立的选择库。但是得到这个错误

Uncaught TypeError: $(...).selectize is not a function

这是我的代码：在标题中

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="../js/selectize.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../css/selectize.default.css" >

在html文件中

<label for="input-tags3">Skills</label>
<input id="input-tags3" name="skills" type="text" th:field="*{skills}" class="demo-default selectized text-input" value="science,biology,chemistry" tabindex="-1" style="display: none;">
<div class="selectize-control demo-default multi plugin-remove_button">
    <div class="selectize-input items not-full has-options has-items">
    <div class="item" data-value="science">science<a href="javascript:void(0)" class="remove" tabindex="-1" title="Remove">×</a></div>
    <div class="item" data-value="biology">biology<a href="javascript:void(0)" class="remove" tabindex="-1" title="Remove">×</a></div>
    <div class="item" data-value="chemistry">chemistry<a href="javascript:void(0)" class="remove" tabindex="-1" title="Remove">×</a></div>
    <input type="text" autocomplete="off" tabindex="" id="input-tags3-selectized" style="width: 4px; opacity: 1; position: relative; left: 0px;">
</div>
    <div class="selectize-dropdown multi demo-default plugin-remove_button" style="display: none; width: 520px; top: 36px; left: 0px; visibility: visible;">
    <div class="selectize-dropdown-content">
    <div class="option" data-selectable="" data-value="physics">physics</div>
    </div>
   </div>
 </div>

在js文件中

$('#input-tags3').selectize({
    plugins: ['remove_button'],
    delimiter: ',',
    persist: false,
    create: function(input) {
        return {
            value: input,
            text: input
        }
    }
});

缺少什么？

【问题讨论】：

你包括jQuery吗？你在哪里定义options？
是的，我已经添加了
之前选择？你在哪里定义options？ 编辑： 根据您的编辑：必须在任何 jQuery 插件之前包含 jQuery。您当前包括 selectize before jQuery。 编辑 2： 您能否复制并粘贴您的实际代码？如果你不断地编辑它们，你很难知道你的错误是什么。
我更新了，在selectize之前。
@TylerRoper 对此感到抱歉。最后更新是正确的

标签： javascript jquery html selectize.js

【解决方案1】：

在document.ready函数开头添加jquery后修复的问题。

$(document).ready(function(){
$('#input-tags3').selectize({
    plugins: ['remove_button'],
    delimiter: ',',
    persist: false,
    create: function(input) {
        return {
            value: input,
            text: input
        }
    }
});
....
});

【讨论】：

【解决方案2】：

您应该将$('select').selectize(); 包装成$(function() {}) 如下以初始化jQuery 原型。

<script type="text/javascript" src="selectize.js"></script>
<link rel="stylesheet" type="text/css" href="selectize.css" />
<script>
$(function() {
    $('select').selectize(options);
});
</script>

请参考here 了解详情。

PS：options可以参考以下例子：

...
$select_city = $('#select-city').selectize({
  valueField: 'name',
  labelField: 'name',
  searchField: ['name']
});
select_city = $select_city[0].selectize;
...
select_city.disable();
...

【讨论】：

我用过，但选项出错。我应该在哪里定义选项？抱歉，我是后端开发人员，最近开始做前端：|
@ImaMiri - 我已经用帖子脚本（PS）更新了我的答案。希望这对您有所帮助。
@ImaMiri - 只需在 API 文档之后添加 json-type options。没什么。
谢谢，我看到了那个 doco。我在页面中有多个选择元素，它们是正常选择。如果我在页面顶部添加该脚本将影响其余部分，我认为这就是我在选项上收到错误的原因。
知道了。如果是这样，我认为您可以为每个选择元素分开单独的选项。希望你已经解决了你的问题。