Filtering multiselect by "value" instead of "text"

The CMS Questions
,
1

Hi!

I’m trying to configure the multiselect field to filter by the “value” property instead of the “text” property. I can see in PicklistInput.vue that the filtering uses the filteredOptions() method:

filteredOptions() {
    // min length for the search to kick in
    if (this.query.length < (this.search.min ?? 0)) {
        return;
    }

    return this.$helper.array.search(this.options, this.query, {
        field: "text"
    });
}

Is there a configuration option to change the field used for filtering from “text” to “value”, or would I need to create a custom plugin and basically rebuild the multiselect field up until PickListInput.vue?
I’ve already tried to create a custom plugin which extends multiselect but didn’t manage to change the filtering function that way.

I’d prefer to avoid rebuilding the entire component if possible, but I’m currently stuck.

Thanks!

2

I am afraid there is no option or similar to achieve this currently. So rebuilding would be the only option I see for now. Please add a suggestion at https://feedback.getkirby.com if you would like to see this configurable (and when you do, always great to explain the use case for this need, thanks).

1 Like
3

Thank you for your reply, I’ll have a look at this next week and maybe create a PR if this is something we are actually implementing

4

Before I actually go ahead and open a PR, I wanted to check here to see if this approach would be valuable to the codebase.

Problem Overview:

We’re currently using the multiselect component to categorise content, with a fairly deep tree structure. Users need to select the leaf node at the end of the tree to categorise a page. Ideally, we’d like to display the paths like this:

"text": leaf
"info": branch 1 -> branch 2 -> branch 3

The issue arises when users search for “branch 3.” They get zero results because only the "text" field is searchable. Currently, the only workaround is to display the entire path within the text field, but this results in excessively long tags, which is not ideal.

Current Solution:

I’ve modified the code in PicklistInput.vue to optionally allow searching within the info field as well.

filteredOptions() {
			// min length for the search to kick in
			if (this.query.length < (this.search.min ?? 0)) {
				return;
			}

			if (this.search.includeInfoField) {
				// Check both the text and info field for matches
				let results = this.$helper.array.search(this.options, this.query, { field: "text" });

				results = results.concat(this.$helper.array.search(this.options, this.query, { field: "info" }));

				// Remove duplicates
				results = results.filter((item, index, self) =>
					index === self.findIndex((t) => t === item)
				);

				return results;
			}

			return this.$helper.array.search(this.options, this.query, {
				field: "text"
			});
		},

and also highlighting the info text within choices():

	info: this.search.includeInfoField ? this.highlight(option.info) : option.info

This way, users can enable the includeInfoField flag in their configuration:

fields:
  category:
    label: Category
    type: multiselect
    search: 
        includeInfoField: true

Would it make sense to open a PR for this change as a first approach? Or is this (or a similar approach) unlikely to be merged into the codebase?

5

I think a PR would be great. We might have to discuss the naming etc. but in general I could see this feature worth discussing and an informed decision. Just a heads up that it might take a while until we can fully examine the PR and make a decision as we are quite tied up at the moment trying to wrap up Kirby 5.

1 Like