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，当前设置为show model，如何指定多个值以显示ex。制造与发展模特

Answer 1

在“渲染”下展示usage documents，表明您可以创建自己的自定义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>';
  }
}

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

1 个答案: