Topic: Autocomplete span styling

tchesney priority asked 1 year 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">${result.date}</span>
            </div>
        `
    },
});

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>
</div></li>

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?

Thanks!


tchesney priority answered 1 year 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 1 year 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.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • User: 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