Filter options to only show items that start with the input value for USelectMenu

[davinma]

Description

Hello,

First of all, thank you for the fantastic work on this project. The USelectMenu component is incredibly useful.

I have a feature request regarding the searchable dropdown functionality. Currently, when a user types in the search input, the dropdown displays all options that contain the input value anywhere within them. However, I would like to request an enhancement to this behavior.

Feature Request: Modify the search functionality so that the dropdown only displays options that start with the input value, rather than containing the input value anywhere within them.

Example: If a user types "1", the dropdown should only show options that start with "1" (e.g., "+1 United States", "+1 Canada"), and not options that contain "1" somewhere in the middle or end.

The filtered country/area code list like this:

This feature would greatly improve the usability for selecting items like country codes, where users expect the options to be filtered by the starting digits they input.

Thank you for considering this request, and for your continued work on this project.

[davinma]

I In the past few days, whenever I had some free time, I tried implementing this small feature in CodeSandbox.

The key points were utilizing the searchable attribute and filtering the options attribute.

const filteredOptions = computed(() => {
  if (!countryCodeQuery.value) {
    return list.value;
  }
  const query = countryCodeQuery.value.toLowerCase();
  return list.value.filter((option) => {
    return option.code.toLowerCase().replace("+", "").startsWith(query);
  });
});
const countryCodeSearchable = (input: string) => {
  countryCodeQuery.value = input;
  return filteredOptions.value;
};