Selectize customize options view

Question

I try to customize multiple select (with selectize.js plugin)

I have the payload with next structure:

[
  {id: 1, name: 'First', email: 'first@ok.ob'},
  {id: 2, name: 'Second', email: 'second@ok.ob'},
  .....
]

how I can customize option to see text in next format

First <first@ok.ob>
Second <second@ok.ob>

but when person is selected in input field it should be displayed like

First Second

without additional parameters

Maybe someone can provide link to documentation or solution, because I couldn't find any information about this case.

Thx.

Answer 1

Selectize has a render callback function for Custom rendering. You can take a look here

You can mention it in its config object. I have used it something like below -

config = {
    valueField: 'id',
    labelField: 'firstName',
    searchField: ['id', 'firstName', 'lastName', 'userName', 'cell'],
    maxItems: 1,
    render: {
        item: (item: any, escape: any) => {
            return `<div>` +
                escape(item.firstName) + ` ` + escape(item.lastName) +
                ` <span>&lt;` + escape(item.userName) + `&gt;</span>` +
                `</div>`;
        },
        option: (item: any, escape: any) => {
            return this.templateCustomer(item, escape);
        }
    },
};