Skip to main content

DHTMLX Kanban. Customization of suggestions in search results example

The default search dropdown shows card labels, but often you need richer results: descriptions, status badges, or other metadata alongside the title. A custom result template lets you control exactly how each search suggestion looks.

Live example​

const { Toolbar, template } = kanban;

function searchResult({result}) {
    return `<div class="list-item">
	<div class="list-item-text">${result.label}</div>
	${result.description ?
		`<div class="list-item-text item-description">${result.description}</div>`
        : ""}
</div>`
}

new Toolbar("#toolbar", {
    api: board.api,
    items: [
        {
            type: "search",
            resultTemplate: template(searchResult)
        }
    ]
});

<!-- component containers -->
<div id="toolbar"></div>
<div id="root" style="height: calc(100% - 56px);"></div>

<style>
.list-item {
		display: flex;
		flex-direction: column;
		padding: 12px 8px;
		max-height: 84px;
		cursor: pointer;
		overflow: hidden;
	}
	.list-item-text {
		line-height: 20px;
	}
	.item-description {
		color: grey;
		overflow: hidden;
	}
</style>

<script>
const { cards, links } = getData();
    cards.forEach(card => {
        card.description = `These are the details of ${card.label}`;
    });

    const users = [
		{
			id: 1,
			label: "Steve Smith",
			avatar: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-1.jpg",
		},
		{
			id: 2,
			label: "Aaron Long",
			avatar: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-2.jpg",
		},
		{
			id: 3,
			label: "Angela Allen",
			avatar: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-3.jpg",
		},
		{
			id: 4,
			label: "Angela Long",
			avatar: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-4.jpg",
		},
		{
			id: 5,
			label: "John Doe",
		},
	];
    
    const columns = [
		{
			label: "Backlog",
			id: "backlog",
		},
		{
			label: "In progress",
			id: "inprogress",
		},
		{
			label: "Testing",
			id: "testing",
		},
		{
			label: "Done",
			id: "done",
		},
	];
    
    const rows = [
		{
			label: "Feature",
			id: "feature",
		},
		{
			label: "Task",
			id: "task",
		},
	];

    const cardShape = {
        label: true,
        description: true,
        progress: true,
        comments: true,
        votes: true,
        start_date: true,
        end_date: true,
        users: {
            show: true,
            values: users,
        },
        priority: {
            show: true,
            values: [
                { id: 1, color: "#FF5252", label: "High", value: 1 },
                { id: 2, color: "#FFC975", label: "Medium", value: 2 },
                { id: 3, color: "#65D3B3", label: "Low", value: 3 },
            ],
        },
        color: true,
        menu: true,
        cover: true,
        attached: false,
    };
    
    const board = new kanban.Kanban("#root", {
        columns,
        cards,
        rows,
        links,
        rowKey: "type",
        cardShape,
        editorShape: [
            ...kanban.defaultEditorShape,
            {
                type: "links",
                key: "links",
                label: "Links",
            },
            {
                type: "comments",
                key: "comments",
                label: "Comments",
                config: {
                    placement: "editor",
                },
            },
        ],
        currentUser: 1,
    });
</script>

The code passes a resultTemplate wrapped in template() to the search toolbar item. The template function receives { result } (the matching card object) and returns HTML with the card label and description. Cards are pre-processed to add description text, and the template conditionally renders the description only when it exists.

Solution overview​

  1. Define a template function that receives { result } and returns HTML for each search suggestion
  2. Wrap it with kanban.template() and pass as resultTemplate to the search toolbar item
  3. Style the custom result items with CSS

Key points​

  • result is the full card object: The template has access to all card fields, not just the label. You can display priority, users, dates, etc.
  • template() wrapper required: Like card and column templates, search result templates must be wrapped with the template() helper

API reference​

  • Toolbar items: Search item configuration including resultTemplate
  • template: Wraps a function for reactive template rendering

Additional resources​