Estou com um problema com o meu código. Não consigo executar o plugin selectize.js nessa página. Todos os caminhos estão corretos. O input aparece e tudo mais, no entanto, quando clico para digitar, o plugin não mostra a lista de opções e acabando não listando nada dos meus options
. O que poderia ser?
Quando jogo no navegador, aparece os seguintes erros no DOM:
teste-form.html:59 Uncaught ReferenceError: $ is not defined // $('#select-country').selectize();
// Código da index.html
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Selectize.js Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="css/selectize/normalize.css">
<link rel="stylesheet" href="css/selectize/stylesheet.css">
<script src="js/selectize/jquery.js"></script>
<script src="js/selectize/selectize.js"></script>
<link rel="stylesheet" href="css/selectize/selectizedefault.css">
</style>
</head>
<body>
<div class="control-group">
<label for="select-country">Country:</label>
<select id="select-country" class="demo-default selectized" placeholder="Select a country..." tabindex="-1" style="display: none;">
<option value="" selected="selected"></option>
</select>
<div class="selectize-control demo-default single">
<div class="selectize-input items not-full has-options">
<input type="text" autocomplete="off" tabindex="" placeholder="Select a country..." style="width: 111px; opacity: 1; position: relative; left: 0px;">
</div>
<div class="selectize-dropdown demo-default single" style="display: none; visibility: visible; width: 1703px; top: 36px; left: 0px;">
<div class="selectize-dropdown-content">
<div data-value="AF" data-selectable="" class="option">
Afghanistan
</div>
<div data-value="AX" data-selectable="" class="option">
Åland Islands
</div>
<div data-value="AL" data-selectable="" class="option">
Albania
</div>
<div data-value="DZ" data-selectable="" class="option">
Algeria
</div>
<div data-value="AS" data-selectable="" class="option">
American Samoa
</div>
<div data-value="AD" data-selectable="" class="option">
Andorra
</div>
</div>
</div>
</div>
</div>
<script>
$(function(){
$('input').selectize({
delimiter: ',',
persist: false,
create: function(input) {
return {
value: input,
text: input
}
}
});
});
$('#select-country').selectize();
</script>
</body>
</html>