Topic: Autocomplete span styling
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!
Grzegorz Bujański staff answered 3 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.
tchesney pro premium priority answered 3 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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: No
- Provided link: No