7732 - Single-Select und Combobox: Hervorhebung der Suchworte (#7818)

Author: deleonio

packages/components/src/components/combobox/shadow.tsx

@@ -228,6 +228,7 @@ export class KolCombobox implements ComboboxAPI {
 									<CustomSuggestionsOptionFc
 										index={index}
 										option={option}
+										searchTerm={this.state._value}
 										ref={(el) => {
 											if (el) this.refSuggestions[index] = el;
 										}}

packages/components/src/components/single-select/shadow.tsx

@@ -280,6 +280,7 @@ export class KolSingleSelect implements SingleSelectAPI {
 									<CustomSuggestionsOptionFc
 										index={index}
 										option={option.label}
+										searchTerm={this._inputValue}
 										ref={(el) => {
 											if (el) this.refOptions[index] = el;
 										}}

packages/components/src/functional-components/CustomSuggestionsOption/CustomSuggestionsOption.tsx

@@ -6,10 +6,20 @@ export type CustomSuggestionsProps = JSXBase.HTMLAttributes<HTMLLIElement> & {
 	index: number;
 	option: W3CInputValue;
 	selected: boolean;
+	searchTerm?: string;
 	ref?: ((elm?: HTMLLIElement | undefined) => void) | undefined;
 };
 
-const CustomSuggestionsOptionFc: FC<CustomSuggestionsProps> = ({ index, ref, selected, onClick, onMouseOver, onFocus, onKeyDown, option }) => {
+const CustomSuggestionsOptionFc: FC<CustomSuggestionsProps> = ({ index, ref, selected, onClick, onMouseOver, onFocus, onKeyDown, option, searchTerm }) => {
+	const highlightSearchTerm = (text: string, searchTerm: string) => {
+		if (!searchTerm?.trim()) return text;
+
+		const regex = new RegExp(`(${searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+		const parts = text.split(regex);
+
+		return parts.map((part, partIndex) => (regex.test(part) ? <mark key={partIndex}>{part}</mark> : part));
+	};
+
 	return (
 		<li
 			id={`option-${index}`}
@@ -25,7 +35,7 @@ const CustomSuggestionsOptionFc: FC<CustomSuggestionsProps> = ({ index, ref, sel
 			class="kol-custom-suggestions-option"
 			onKeyDown={onKeyDown}
 		>
-			{option}
+			{highlightSearchTerm(String(option), searchTerm || '')}
 		</li>
 	);
 };