htmlstreamofficial
Enhance HSSelect search (not remote) to support multi-word, non-consecutive matching
Summary
This feature will let users find an option as long as the words they type in the search box are in it, even if they're out of order or have other words between them. Right now, they can't find "Alpha Bravo Charlie Delta" by searching "Alpha Charlie"; this feature will fix that, making the search way more useful.
Detailed Description
- The Current Problem
Currently, the HSSelect search (hasSearch: true) performs a simple, direct substring match. This means if a user searches for multiple words, the component looks for that exact string, which is often not what the user intends.
Example of Current Behavior:
Option in list: Alpha Bravo Charlie Delta
User searches for: "Alpha Charlie"
Current Result: No match is found.
This is because the component is literally searching for the string "Alpha Charlie" inside "Alpha Bravo Charlie Delta", and it doesn't exist as a consecutive string.
- The Expected (Desired) Behavior
A more intuitive and powerful search would treat the search input as separate "tokens" (words) and check if all tokens exist within the option text, regardless of their order or the words between them.
This is the standard behavior in advanced "select" libraries like Tom Select or Select2, and it's what users generally expect from a search box.
Example of Expected Behavior:
Option in list: Alpha Bravo Charlie Delta
User searches for: "Alpha Charlie"
Search Logic:
Tokenize the search input into ['Alpha', 'Charlie'].
Check if "Alpha Bravo Charlie Delta" includes 'Alpha'. (Result: True)
Check if "Alpha Bravo Charlie Delta" includes 'Charlie'. (Result: True)
Since all tokens match, show the option.
Desired Result: The option Alpha Bravo Charlie Delta is shown in the results.
Use Cases
Addresses: A user needs to find an address in a long list.
Option in list: 1520 Mountain View Rd, Palo Alto, CA 94304 User Search: "Palo Alto Mountain" Current Behavior: No result. With this Feature: The address is found, because both "Palo Alto" and "Mountain" are present in the text.
Product Inventories: A user is searching for a specific product.
Option in list: Samsung 4K QLED TV 55-inch (Black) User Search: "Samsung 55 black" Current Behavior: No result. With this Feature: The correct TV is found.
