Template HTML is escaped, how do I fix it (straight javascript)

[treeder]

I have this:

templates: {
        item({ item }) {
            return `<div>
                <a href="/things/${item.objectID}">${item.title}</a>
                </div>`
        },
        noResults() {
            return 'No results.';
        },
    },

And it shows up like this:

Any idea how to fix the template to not escape the HTML?

[Haroenv]

you can use jsx as html is indeed escaped. For example: https://codesandbox.io/s/nostalgic-pasteur-mdsff?file=/app.js

        templates: {
          item({ item }) {
            // you can use jsx
            return (
              <div>
                <a href={`/things/${item.objectID}`}>{item.name}</a>
              </div>
            );
          },
          noResults() {
            // you can also use "h" directly:
            return h('div', {}, h('a', { href: '/' }, 'no results link'));
          },
        },
      },

[treeder]

This assumes I'm using react doesn't it? That's invalid JS syntax.

[Haroenv]

you can use preact as it's used inside the autocomplete library, and if you don't want to use jsx, you can use the "createElement"/"h" form as in the second example

[treeder]

Ahh, ok, that worked. thx.

[Haroenv]

Since the latest version of autocomplete, you can now use the exposed html tagged template too, which allows you to write html strings, but still get dynamic code in the end: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/templates/#returning-html