CODEWITHSUNDEEP
javascriptjqueryhtmlselectize.js
Ima Miri
Ima Miri

Reputation: 967

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

I'm trying to use standalone selectize library in my webapplication. But getting this error 

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

Here is my code: In header

<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" >

In the html file

<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>

In the js file

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

What's missing?

Upvotes: 1

Views: 13591

Answers (2)

SuperStar518
SuperStar518

Reputation: 2885

You should wrap $('select').selectize(); by $(function() {}) as follows in order to initialize jQuery prototype.

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

Refer here to get details.

PS: For options, you could refer to the following examples:

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

Upvotes: 2

Ima Miri
Ima Miri

Reputation: 967

The issue fixed after adding the jquery at the beginning of the document.ready function.

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

Upvotes: 1

Related Questions