Hello,
I would like to build a combo box where I can display username, first name, last name, etc… (multiple columns)
Here is my current progress (Made up from other examples):
https://jsfiddle.net/7mj48fzx/1/
Open points I can not manage:
matcher but it dows not work.Thank you and best regards,
Bernhard
You probably don’t need a custom matcher; you do need to format your data array items correctly. They are currently missing the text field, which is required (and is what the default matcher matches against). You could compose the text field’s value from the existing fields, like so:
data: myData.map(item => ({...item, text: `${item.username}|${item.firstname}|${item.lastname}|${item.mail}`})),
This code returns a new data array that contains all of your data items with an additional text field consisting of the username, firstname, lastname and mail fields separated by vertical bars (you could use any other separator you want; it should be a character that won’t appear in your fields’ values, and a character that users will be unlikely to type in the search box).
Your placeholder is not appearing because you don’t have an empty <option> as the first item in your select list. See the note under the single select placeholder documentation.
Hi John, thank you for pointing this out. I had not considered that matcher requires a text field. The search now works.
As for the placeholder: I did include an empty options field:
< select id=“username” name=“username” class=“form-control”>
< option>< /option>
< /select>
(Sorry about the formatting.)
Your templateSelection function is preventing the placeholder text from displaying. Note that the placeholder element is one of the options that gets passed to the templateSelection callback. Your callback code always outputs option.username, but the placeholder option doesn’t have a username field, so nothing gets output when the placeholder is “selected”. Change the return statement in your callback to the following, and you’ll see your placeholder:
return option.id ? option.username : option.text;
This works because the placeholder option has an empty id value, and the placeholder text is in the option.text field, whereas your “data” options have non-empty id values.