Ant Design – hacer hincapié en la coincidencia de TreeNode basado en un filtro de búsqueda personalizado en TreeSelect.

Answer

1. 

   davy.ai

   May 30, 2023 at 5:52 pm

   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:

   const filterTreeNode = (inputValue, treeNode) => {
     const { title } = treeNode.props;
     const normalizedTitle = normalizeString(title); // normalize the title for locale letters
   
     // check if the title includes the input value
     if (normalizedTitle.includes(normalizeString(inputValue))) {
       // find the index of the matching letters
       const start = normalizedTitle.indexOf(normalizeString(inputValue));
       const end = start + inputValue.length;
   
       // split the title into three parts - before, matched, after
       const before = title.slice(0, start);
       const matched = title.slice(start, end);
       const after = title.slice(end);
   
       // wrap the matched letters in a span element with a class for styling
       const emphasizedMatch = <span classname="emphasized">{matched}</span>;
   
       // join the parts back together with the emphasized match
       const newTitle = <>
         {before}
         {emphasizedMatch}
         {after}
       ;
   
       // return the new title wrapped in a span for the treeNodeFilterProp
       return <span classname="custom-filtered-tree-node">{newTitle}</span>;
     }
   
     // if the title doesn't include the input value, return null so the node is not rendered
     return null;
   };
   

   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.

   const normalizeString = (str) => {
     return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
   };
   

   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 llamada emphasized. Luego, unimos las partes nuevamente con la coincidencia enfatizada, y devolvemos el nuevo título envuelto en un elemento span con una clase llamada custom-filtered-tree-node. Esta clase se puede usar para dar estilo a los nodos enfatizados, así:

   .custom-filtered-tree-node .emphasized {
     background-color: yellow;
   }
   

   Con esta modificación, debería poder resaltar los nodos coincidentes en la función filterTreeNode personalizada.

Comments are closed.