我一直收到js的问题中提到的错误:
var $filter = $('#share_tags')[0].selectize;
相关的html也附在..
(function() {
// Extra symbols for our share expression
var symbols = ['+','|','~','(',')'],
symbolCount = {};
// Initialize all symbols count to 0
symbols.forEach(function(s) {
symbolCount[s] = 0;
});
// our ops
var ops = [
{ value: '+', text: 'AND', symbol:true },
{ value: '|', text: 'OR', symbol: true },
{ value: '~', text: 'NOT', symbol: true },
{ value: '(', text: '(', symbol: true },
{ value: ')', text: ')', symbol: true }
];
function getText(value) {
for(var i = 0, len = ops.length; i < len; i += 1) {
if (ops[i].value === value) {
return ops[i].text;
}
}
}
// User select
$('#share_with').selectize({
openOnFocus: false,
});
// Tag select
$('#share_tags').selectize({
persist: false,
onItemAdd: function(value, $item) {
if (symbolCount.hasOwnProperty(value[0])) {
var value = value[0],
count = symbolCount[value];
$filter.addOption({
value: value + '' + (count+1),
text: getText(value)
});
symbolCount[value] += 1;
$filter.refreshOptions();
}
},
onItemRemove: function(item) {
if (symbolCount.hasOwnProperty(item[0]) !== -1) {
for (opt in $filter.options) {
if ($filter.options.hasOwnProperty(opt)) {
if (opt !== item && opt[0] === item) {
delete $filter.options[opt];
}
}
}
}
}
});
var $filter = $('#share_tags')[0].selectize;
$('#shareForm').on('submit', function(e) {
var tags = $('#share_tags').val(),
expression = [],
symbol,
item;
for (var i = 0, len = tags.length; i < len; i += 1) {
item = tags[i];
if (symbolCount.hasOwnProperty(item[0]) !== -1) {
symbol = item[0] === '+' ? '&' : item[0];
expression.push(symbol);
}
else {
expression.push(item);
}
}
$('#share_expression').val(expression.join(''));
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$(".search-card").removeClass("hide");
} // esc
});
$('.js-share-btn').on('click', function(e) {
$(".search-card").addClass("hide");
App.Util.preventDefault(e);
Avgrund.show("#createShare");
});
$('.edit-share-button').on('click', function(e) {
$(".search-card").addClass("hide");
App.Util.preventDefault(e);
Avgrund.show("#createTaskShare");
});
$(".js-popup-close").on("click",function () {
$(".search-card").removeClass("hide");
});
}());
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
{% set created_tags = [t for t in tags if t.tag.created_by == current_user] %}
<form name="shareForm" id="shareForm" method="post" action="/share/new">
<fieldset>
<h3>Share card</h3>
</fieldset>
<div class="form-group">
<label for="share_name">Card name</label>
<input type="text" class="form-control" name="share_name" id="share_name" required="required">
</div>
<div class="form-group">
<label for="share_tags">Tag</label>
<select class="form-control" name="share_tags" id="share_tags" required="required" placeholder="Pick a tag to share">
{% if q[0] == '#' %}
{% set name, id = q.split("/") %}
<option value="{{ id }}">{{ name }}</option>
{% end %}
</select>
{#
<select class="form-control" name="share_tags" id="share_tags" required="required" multiple="multiple" placeholder="Pick a tag to share">
<option value=""></option>
<optgroup label="Tags">
{% for t in created_tags %}
<option value="{{ t.tag.id }}">{{ t.tag.name }}</option>
{% end %}
</optgroup>
<optgroup label="Filters">
<option value='+'>AND</option>
<option value='|'>OR</option>
<option value='~'>NOT</option>
<option value='('>(</option>
<option value=')'>)</option>
</optgroup>
</select>
#}
</div>
<div class="form-group">
<label for="share_with">Share with</label>
<select class="input-control" name="share_with" id="share_with" required="required" multiple="multiple" placeholder="Choose a few people">
<option value="">Select a user</option>
{% for user in contacts %}
{% if user.id != 1 %}
<option value="{{ user.id }}">{{ user.name }} <{{ user.email }}></option>
{% end %}
{% end %}
</select>
</div>
{% module xsrf_form_html() %}
<input type="hidden" name="share_expression" id="share_expression" value="">
<div class="form-group">
<button type="submit" class="btn btn-primary share-btn">Share</button>
<button type="button" class="btn-link js-popup-close">Cancel</button>
</div>
</form>
&#13;
答案 0 :(得分:-1)
Selectize是一个Jquery插件。如果您不导入它,您将无法使用它。 (这是错误,您的对象没有选择属性)。
您可以看到plugin page,或github。
下载here并尝试一下。
请记住添加以下行:
<script type="text/javascript" src="selectize.js"></script>
<link rel="stylesheet" type="text/css" href="selectize.css" />