2015-12-16 2 views
2

Я внедривший selectize.js на моей форме, и это работает прекрасно ниже мой кодпоказать несколько значений labelField в 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. make & модель

ответ

5

Отбор 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>'; 
    } 
}