在selectize.js中显示labelField的多个值

Question

我在我的表单上实现了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 '<div>'
           + '<strong>'       
           + escape(item.subcategory) + '- ' 
           + '</strong>' 
           + escape(item.make) + ' ' 
           + escape(item.model)  
           + '</div>';
    }
  },
  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.制作和模型

Answer 1

选择使用文档,在"渲染"下显示您可以创建自己的自定义item渲染功能.这就是我在自己的项目中得到你想要的结果的方法.完成自定义option渲染功能的方式与完成相同:

render: {
  option: function(item, escape) {
    return '<div>'
      + '<strong>'       
      + escape(item.subcategory) + '- ' 
      + '</strong>' 
      + escape(item.make) + ' ' 
      + escape(item.model)  
      + '</div>';
  },
  item: function(item, escape){
    return '<div>'
      + escape(item.make) + ' ' 
      + escape(item.model) 
      + '</div>';
  }
}