我正在使用辉煌的selectize.js库生成一个有选择组的有吸引力的选择框。这一切都正常，但我不知道我不能使用示例页面中的自定义渲染器（电子邮件联系人） http://brianreavis.github.io/selectize.js/ 因为“item”不知道“email”属性。我知道如何在javascript中执行此操作，但如何在静态html中定义这两个属性？
在js，这个woulde
$('#id').selectize({
...
options: [
{ name: "Martin", email: "martin@asdf.at" }
],
....
}
我尝试了以下方法：
<select>
<option value="Martin|martin@asdf.at" data-name="Martin" data-email="martin@asdf.at">
Martin
</option>
</select>
但这不起作用......最后从示例中获取渲染函数：
render: {
item: function(item, escape) {
return '<div>' +
(item.name ? '<span class="name">' + escape(item.name) + '</span>' : '') +
(item.email ? '<span class="email">' + escape(item.email) + '</span>' : '') +
'</div>';
},
option: function(item, escape) {
var label = item.name || item.email;
var caption = item.name ? item.email : null;
return '<div>' +
'<span class="label">' + escape(label) + '</span>' +
(caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
'</div>';
}
}
我会感谢任何提示！
问候，
马丁
使用此示例：
var clearhack = $('.selectized').selectize({
valueField: 'id',
labelField: 'name',
searchField: ['name'],
sortField: 'score',//this is set to 'name' on my version, but seems sortField is only used together with load-function and score-function
sortDirection: 'desc',
maxItems: 1,
//only using options-value in jsfiddle - real world it's using the load-function
options: [
{"id":861,"name":"Jennifer","score":6},
{"id":111,"name":"Jenny","score":6},
{"id":394,"name":"Jorge","score":6},
{"id":1065,"name":"Jorge Carlson","score":6},
{"id":389,"name":"Ann Jennifer","score":3},
{"id":859,"name":"Bobby Jenkins","score":3},
{"id":264,"name":"Peter Jenkins","score":3},
{"id":990,"name":"Fred","score":1},
{"id":349,"name":"Kal","score":1},
{"id":409,"name":"Louis","score":1}
],
create: false,
render: {
option: function(item, escape) {
return '<div>'
+ '<span>ID:'+item.id+'</span> '
+ '<span>Name:'+item.name+'</span> '
+ '<span>DEBUG:'+item.score+'</span>'
+ '</div>';
}
},
score: function(search) {
return function(item) {
return parseInt(item.score);
};
}
});
不确定这是否有用，因为它太晚了 - 但我使用以下方法在我的选择选项下获取标题：
html选项如：
<option data-data='<?php echo json_encode($obj, JSON_FORCE_OBJECT) ?>' value="<?php echo $obj->id ?>"><?php echo $obj->name ?></option>
然后选择代码：
$('select#my-select').selectize({
valueField: 'id',
labelField: 'name',
searchField: ['name'],
render: {
option: function(item, escape) {
var label = item.name;
var caption = item.description;
return '<div>' +
'<span style="display: block; color: black; font-size: 14px;">' + escape(label) + '</span>' +
(caption ? '<span style="display: block; color: gray; font-size: 12px;">' + escape(caption) + '</span>' : '') +
'</div>';
}
}
});
没有阅读过很多文档，但这对于$ obj有用，例如：
{ 'id': '1', 'name': 'fred', 'description': 'fred person'}
只需添加更多属性并在渲染选项功能中引用它们。
似乎selectize从数据数据属性读取json来填充这些，但我相信你可以通过传递一个来改变它读取json的属性 dataAttr 初始化中的选项。
几分钟前我遇到了同样的问题。
我添加了很少的代码 selectize.js
在功能上 init_select 接下来 addOption 在默认代码之后，我添加：
/// iterate on data attr on <option>
$.each($option.data(), function(i, v) {
option[i] = v;
});
将此代码粘贴到原始行下方：
var option = readData($option) || {};
option[field_label] = option[field_label] || $option.text();
option[field_value] = option[field_value] || value;
option[field_optgroup] = option[field_optgroup] || group;
在此之后，我在selectize中的渲染方法可以正常使用静态数据属性:)