How to use multiple labelField on one component ?

[manutheblacker]

Hi,

I'm building a search bar for an app using the remote database search.
The backend is returning correctly the data expected, i defined my Svelecte component this way.

<Svelecte
      on:change={loadValueElement}
      bind:value={rapport.demande_associated}
      minQuery="1"
      multiple={false}
      valueAsObject={true}
      strictMode={false}
      valueField="id"
      labelField="ref"
      placeholder="Entrer la référence ici ... :"
      fetch={reportUrl}
      renderer={displayR}
    ></Svelecte>

I wanted to know if there is a way to use the labelField like this : {"ref"|"country"|"city"}

[mskocik]

You need to use custom render function in renderer property or appropriate slot/snippet (depending on which version are you using)

[manutheblacker]

I have found out, by default it check on all response data, it doesn't look into nested data.
I have data like this :

{
    'ref' : '1er',
    'company' : {
        id : 1, name : 'Benin' 
        }
}

i was searching Benin at the parent level, i think this is where Svelecte look for the data, finally i've modified my backend code to return this information also at the parent level.

I was wondering, if there was a way to also search at the sublevel of company ?

[mskocik]

I was wondering, if there was a way to also search at the sublevel of company ?

Yes, it is. You need to specify also nesting property for searchProps, check the documentation about searching.