sort suggestions by comparison score

Author: ScriptRaccoon

src/components/Selection.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import ChipGroup from './ChipGroup.svelte'
 	import Chip from './Chip.svelte'
-	import { normalize_text } from '$lib/client/utils'
+	import { get_comparison_score, normalize_text } from '$lib/client/utils'
 
 	type Props = {
 		title?: string
@@ -27,18 +27,17 @@
 
 	const id = $props.id()
 
-	let suggestions = $derived(
-		selected_items.length >= max ? [] : allowed_items.filter(is_suggestion),
-	)
-
-	let suggestions_element = $state<HTMLDivElement | null>(null)
-
-	function is_suggestion(allowed_item: string) {
-		return (
-			!selected_items.includes(allowed_item) &&
-			normalize_text(allowed_item).includes(normalize_text(item.trim()))
-		)
-	}
+	let suggestions = $derived.by(() => {
+		if (selected_items.length >= max) return []
+		const q = item.trim()
+		if (!q) return []
+		return allowed_items
+			.filter((a) => !selected_items.includes(a))
+			.map((a) => ({ a, r: get_comparison_score(a, q) }))
+			.filter((x) => x.r > 0)
+			.sort((x, y) => y.r - x.r || x.a.localeCompare(y.a))
+			.map((x) => x.a)
+	})
 
 	function is_valid(item: string) {
 		return (
@@ -63,6 +62,8 @@
 		active_index = 0
 	}
 
+	let suggestions_element = $state<HTMLDivElement | null>(null)
+
 	function handle_blur(e: FocusEvent) {
 		const is_suggestion_click = suggestions_element?.contains(e.relatedTarget as Node)
 		if (!is_suggestion_click) show_suggestions = false

src/lib/client/utils.ts

@@ -27,6 +27,16 @@ export function normalize_text(txt: string) {
 		.replace(/\p{Diacritic}/gu, '')
 }
 
+export function get_comparison_score(value: string, query: string) {
+	if (!query) return -1
+	const v = normalize_text(value)
+	const q = normalize_text(query)
+	if (v === q) return 3
+	if (v.startsWith(q)) return 2
+	if (v.includes(q)) return 1
+	return 0
+}
+
 export const resize_textarea: Attachment = (textarea) => {
 	if (!(textarea instanceof HTMLTextAreaElement)) return