我在我的表单上实现了selectize.js,下面的工作正常,是我的代码
$('#searchbox').selectize({ valueField: 'id', labelField: 'model', searchField: ['category', 'subcategory', 'model', 'make'], maxOptions: 10, options: [], create: false, closeAfterSelect: true, render: { option: function(item, escape) { return '' + '' + escape(item.subcategory) + '- ' + '' + escape(item.make) + ' ' + escape(item.model) + ''; } }, load: function(query, callback) { if (!query.length) return callback(); $.ajax({ url: '/api/search', type: 'GET', dataType: 'json', data: { q: query }, error: function() { callback(); }, success: function(res) { callback(res.data); } }); }, onChange: function(value){ }, onItemAdd: function(value, $item){ $(".item-type").prop( "disabled", true ); $(".item-area").hide(); $("#item-id").val(value); }, onItemRemove: function(value){ $(".item-type").prop( "disabled", false ); $(".item-area").show(); $("#item-id").val(""); } });
但是在我选择弹出结果中的选项之后,它只允许我将其中一个值设置为labelField,当前它设置为显示模型,如何指定多个值来显示ex.制作和模型
选择使用文档,在"渲染"下显示您可以创建自己的自定义item
渲染功能.这就是我在自己的项目中得到你想要的结果的方法.完成自定义option
渲染功能的方式与完成相同:
render: { option: function(item, escape) { return '' + '' + escape(item.subcategory) + '- ' + '' + escape(item.make) + ' ' + escape(item.model) + ''; }, item: function(item, escape){ return '' + escape(item.make) + ' ' + escape(item.model) + ''; } }