javascript Selectize.js 自定义渲染与静态 html
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23206574/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Selectize.js custom rendering with static html
提问by Martin Horvath
I am using the brilliant selectize.js library to generate an attractive select box with option groups. It is all working but I am stuck at the point that I cannot use the custom renderer from the examples page (Email contacts) http://brianreavis.github.io/selectize.js/because "item" does not know of the "email" attribute. I know how to do this in javascript, but how could I define the two attributes in static html?
我正在使用出色的 selectize.js 库来生成一个带有选项组的有吸引力的选择框。一切正常，但我无法使用示例页面（电子邮件联系人）http://brianreavis.github.io/selectize.js/ 中的自定义渲染器，因为“项目”不知道“电子邮件”属性。我知道如何在 javascript 中执行此操作，但是如何在静态 html 中定义这两个属性？
In js, this woulde be
在 js 中，这将是
$('#id').selectize({
...
options: [
{ name: "Martin", email: "[email protected]" }
],
....
}
I tried the following:
我尝试了以下方法：
<select>
<option value="Martin|[email protected]" data-name="Martin" data-email="[email protected]">
Martin
</option>
</select>
But this is not working... Finally the render function taken from the examples:
但这不起作用......最后是从示例中获取的渲染函数：
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>';
}
}
I would be thankful for any hints!
我将不胜感激任何提示！
Regards, Martin
问候， 马丁
回答by Adonias Vasquez
Use this example:
使用这个例子：
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);
};
}
});
回答by DJB
Not sure if this will help as it's super late - but I used the following method to get captions under my select options:
不确定这是否会有所帮助，因为它太晚了 - 但我使用以下方法在我的选择选项下获取字幕：
html options like:
html 选项，如：
<option data-data='<?php echo json_encode($obj, JSON_FORCE_OBJECT) ?>' value="<?php echo $obj->id ?>"><?php echo $obj->name ?></option>
and then selectize code:
然后选择代码：
$('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>';
}
}
});
Haven't read a lot of the docs but this will work for $obj such as:
还没有阅读很多文档，但这对 $obj 有效，例如：
{ 'id': '1', 'name': 'fred', 'description': 'fred person'}
Just add more attributes and reference them in your render option function.
只需添加更多属性并在渲染选项函数中引用它们即可。
It seems selectize reads json from a data-data attribute to populate these, but I believe you can change what attribute it reads json from by passing a dataAttroption in the initialize.
似乎 selectize 从 data-data 属性中读取 json 来填充这些，但我相信您可以通过dataAttr在 initialize 中传递一个选项来更改它从中读取 json 的属性。
回答by robertw
I had the same problem couple minutes ago.
I've add little code to selectize.js
几分钟前我遇到了同样的问题。我添加了一些代码selectize.js
In function init_selectand next addOptionafter default code, I've add:
在函数init_select和addOption默认代码之后，我添加了：
/// iterate on data attr on <option>
$.each($option.data(), function(i, v) {
option[i] = v;
});
Paste this code below original lines:
将此代码粘贴到原始行下方：
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;
After this my render method in selectize works fine with static data attributes :)
在此之后，我在 selectize 中的渲染方法适用于静态数据属性:)
