Topic: Autocomplete span styling

tchesney priority asked 2 years ago

I'm using ajax to pull in content for an autocomplete and I'm using the custom item template. The data I'm pulling into the autocomplete consists of 3 items. One of those items, I want to stylize the font with a color using <span style="color:red;">. No matter what I've tried, it appears the styling is dropped when the autcomplete renders.

Here's my code:

new mdb.Autocomplete(asyncAutocomplete, {
  filter: asyncFilter,
  displayValue: (value) => value[name],
  itemContent: (result) => {
        return `
            <div class="autocomplete-custom-item-content">
                <span class="item item-name">${result[name]}</span>
                <span class="item item-status" style="color:${result.status_color};">${result.status}</span>
                <span class="item item-incident_date">${}</span>

Here's the output from devtools of a rendered item from the autocomplete:

<li data-mdb-index="2" role="option" class="autocomplete-item"><div class="autocomplete-custom-item-content">
    <span class="item item-name">Han Solo</span>
    <span class="item item-status">Open</span>
    <span class="item item-incident_date">2022-01-01</span>

Does the autocomplete support inline styles? I know classes are accepted, but I need the ability for inline styles here since this is dynamic.

Any ideas?


tchesney priority answered 2 years ago

Thank you! I'd really appreciate it. Currently we're using flexdatalist.js, but that's jquery-based and one of the draws to mdbootstrap is the ability to move away from jquery altogether. Flexdatalist's main draw for us is the ability to style the list options.

Grzegorz Bujański staff answered 2 years ago

At the moment it is not possible. I'll add this to our to-do list. We will try to add this possibility.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.0.0
  • Device: Desktop
  • Browser: Vivaldi (Chromium)
  • OS: MacOS 12.3.1
  • Provided sample code: Yes
  • Provided link: No