SmartSelect show custom content

Questions
1

Is there a way to add custom content to a smart-select?

Reason:
I have a nice and working smart-select, but need to add some more information to the options (icons, links, etc… Much like a media-list or list of arbitrary nodes.)

Any ideas?

2

you can manipulate Dom element by javascrip to put the element inside, or if you mount the option dinamicaly by bring data from database you can use javascript to bind atributes, remove add elements…

3 
 this.$f7.smartSelect.create({
  ...
  renderItems: this.renderItems,
  ...
}
...
renderItems (items) {
  let html = ''
  items.forEach(i => {
    html += `
     <li class="add-user-style">
       // custom html
     </li>
  })
  return html
}
1 Like
4

hi @TinoWeb ,

yes, I know - I can hack and patch everything together. I meant more like a regularand maintainable way :wink:

1 Like
5

Hi @pvtallulah,
it’s not that easy, since the smart-select already exists and gets dynamically created… (and I just wanted to add some tiny things)…

But you’re right in that it’s likely easier and cleaner to re-write the code and create a new smart-select instead of patching the existing one…

thx all

6

Yes, as @pvtallulah suggested the right way will be to pass custom renderItem(item, index) function and return there whatever need to be rendered.

The other way, as suggested by @TinoWeb, you can hook into SS’s open event and manipulate DOM directly. But 1st approach is better here

1 Like