Selaa lähdekoodia

Improves TreeSelect search functionality

Refines the item matching logic in the TreeSelect component to check if any word in the normalized label starts with the normalized search text.
This change enhances the search accuracy by considering word boundaries within labels, leading to more relevant search results.
It introduces a helper function to determine if any word starts with search term.
Olivier Massot 4 kuukautta sitten
vanhempi
commit
d45adb5cc5
1 muutettua tiedostoa jossa 21 lisäystä ja 4 poistoa
  1. 21 4
      components/Ui/Input/TreeSelect.vue

+ 21 - 4
components/Ui/Input/TreeSelect.vue

@@ -267,6 +267,21 @@ const onSearchInput = () => {
   }
 }
 
+/**
+ * Checks if any word in the normalized text starts with the normalized search term.
+ *
+ * @param {string} normalizedText - The normalized text to check.
+ * @param {string} normalizedSearch - The normalized search term.
+ * @returns {boolean} `true` if any word in the text starts with the search term; otherwise, `false`.
+ */
+const anyWordStartsWith = (normalizedText: string, normalizedSearch: string): boolean => {
+  // Split the text into words
+  const words = normalizedText.split(' ')
+
+  // Check if any word starts with the search term
+  return words.some(word => word.startsWith(normalizedSearch))
+}
+
 /**
  * Determines if a given item matches the current search text by checking its label
  * and, for certain items, the labels of its parent elements.
@@ -281,6 +296,8 @@ const onSearchInput = () => {
  *
  * For all other item types, only the item's label is checked.
  *
+ * The matching is done by checking if any word in the normalized label starts with the normalized search text.
+ *
  * @param {SelectItem} item - The item to evaluate against the search text.
  * @returns {boolean} `true` if the item or its relevant parent(s) match the search text; otherwise, `false`.
  */
@@ -292,23 +309,23 @@ const itemMatchesSearch = (item: SelectItem): boolean => {
   // Si c'est un élément de niveau 2, vérifier son label et les labels de ses parents
   if (item.type === 'item' && item.level === 2) {
     // Vérifier le label de l'élément
-    if (StringUtils.normalize(item.label).includes(normalizedSearch)) return true
+    if (anyWordStartsWith(StringUtils.normalize(item.label), normalizedSearch)) return true
 
     // Trouver et vérifier le label de la sous-catégorie parente
     const subcategory = props.items.find(i => i.id === item.parentId)
-    if (subcategory && StringUtils.normalize(subcategory.label).includes(normalizedSearch)) return true
+    if (subcategory && anyWordStartsWith(StringUtils.normalize(subcategory.label), normalizedSearch)) return true
 
     // Trouver et vérifier le label de la catégorie parente
     if (subcategory && subcategory.parentId) {
       const category = props.items.find(i => i.id === subcategory.parentId)
-      if (category && StringUtils.normalize(category.label).includes(normalizedSearch)) return true
+      if (category && anyWordStartsWith(StringUtils.normalize(category.label), normalizedSearch)) return true
     }
 
     return false
   }
 
   // Pour les autres types d'éléments, vérifier simplement leur label
-  return StringUtils.normalize(item.label).includes(normalizedSearch)
+  return anyWordStartsWith(StringUtils.normalize(item.label), normalizedSearch)
 }
 
 /**