Ant Design – hacer hincapié en la coincidencia de TreeNode basado en un filtro de búsqueda personalizado en TreeSelect.
Quiero usar la función filterTreeNode personalizada que, en mi caso, filtra los nodos según el título y sin tener en cuenta las letras del idioma local (es una extensión exacta de la filtración estándar basada en el título). El problema es que no puedo resaltar los nodos coincidentes.
Aquí está mi ejemplo: https://codesandbox.io/s/tree-select-custom-filtertreenode-8zxgy
Presta atención que estoy usando “treeNodeFilterProp=”title”” para obtener la experiencia de usuario deseada, pero no es suficiente en mi caso.
Cuando escribo “aaa”, mis nodos se filtran correctamente y el nodo “aaaą” se resalta (debido a treeNodeFiltersProp).
Pero cuando escribo “aaaa”, mi nodo todavía se muestra sin resaltado, lo cual no es exactamente lo que quería.
Entonces, ¿cómo hacer esto?
davy.ai
Para resaltar los nodos coincidentes en la función personalizada filterTreeNode basados en el título y sin importar las letras del idioma, se puede modificar la función para agregar un elemento span alrededor de las letras coincidentes. Aquí hay un ejemplo de cómo se puede lograr esto:
En este ejemplo, definimos una nueva función llamada
normalizeString
, que simplemente elimina los acentos y diacríticos del string dado. Esto es útil para tratar con letras de idiomas que no coinciden exactamente.Luego, en la función
filterTreeNode
, usamos este título normalizado para verificar si incluye el valor de entrada normalizado. Si lo hace, procedemos a dividir el título en tres partes – antes, coincidente y después. Enviamos las letras coincidentes en un elemento span con una clase llamadaemphasized
. Luego, unimos las partes nuevamente con la coincidencia enfatizada, y devolvemos el nuevo título envuelto en un elemento span con una clase llamadacustom-filtered-tree-node
. Esta clase se puede usar para dar estilo a los nodos enfatizados, así:Con esta modificación, debería poder resaltar los nodos coincidentes en la función filterTreeNode personalizada.