Buscar en un TreeView con Autocomplete y JQuery

Para que una aplicación web tenga un interfaz de usuario fácil de utilizar y facilitemos su usabilidad no hay más remedio que pasar por un lenguaje script y por eso cada vez que tengo la oportunidad me gusta hacer alguna práctica con JavaScript y en este caso utilizando la librería JQuery que facilita nos facilita mucho esta tarea.

La excusa que utilizo hoy para hacer este ejemplo es una petición en los foros MSDN para hacer una búsqueda de texto en un TreeView y poder seleccionar posteriormente el nodo que coincida con esta selección.

Para esto voy a utilizar un plugin de Jquery que provee a los inputs la extensión de mostrar un autoComplete donde se mostraran los textos de los nodos que coincidan con el texto introducido en el input.

Para las referencias a las librerías Jquery utilizare CDN para aprovechar sus beneficios y no tener obligatoriamente las librerías en nuestro proyecto.

Empecemos!!!

Crearemos un proyecto web que contendrá una página aspx con un simple input html y un treeview que llenaremos con los mismos campos que piden en la consulta del foro.

image

Lo único que tenemos que tener en cuenta, es que necesitamos un identificador para el input y especificar un estilo al treeview que utilizaremos para localizar el control al cargar la página.

<input id="example" />
<asp:TreeView ID="TreeView1" runat="server" CssClass="TreeN">
  <ParentNodeStyle CssClass="ItemNodeTree" />

Una vez preparada la página crearemos un fichero .JS donde pondremos nuestro código javaScript para darle la funcionalidad al ejemplo.

<script src="JS/JScript.js" type="text/javascript"/>

Primera parte del script:

1. Inicializar el autocomplet y cargar los datos del treeview.

$(document).ready(function() {
    var data = CargarDatos();

    $("#example").autocomplete(data, {

        //Texto a mostrar en el input
        formatItem: function(item) {
            return item.text;
        }
    }).result(function(event, item) {
        //Identificador del Nodo
        Seleccionar(item.id);
    });
});

Al cargar la página llamamos a la función CargarDatos() que recorrerá el treeView para retornar un array de objetos que contendrán el texto y el identificador de cada nodo. Cuando se lanza el evento al seleccionar el registro se llamará a la función Seleccionar pasando el identificador del nodo como parámetro.

 

image

 

2. CargarDatos utiliza la potencia de los selectores de JQuery para seleccionar los nodos y llenar el array con la información necesaria del nodo.

function CargarDatos() {

    var treeN = $(".TreeN");
    var items = new Array();
    if (treeN.length){
      var nodo = $("#"+treeN[0].id + " td: a" );
      for (var index = 0; index < nodo.length; index++) {      
        items[index] = { text: nodo[index].innerText, id: nodo[index].id };      
      }      
    }
    return items;
}

3. Seleccionar selecciona el nodo del treeView y le asigna el estilo adecuado para resaltar el registro seleccionado.

function Seleccionar(treeID) {

    //Limpiamos los estilos seleccionados anteriormente
    var es = $('.SelectedNodeTree');
    for (var index = 0; index < es.length; index++) {
        es[index].className = "ItemNodeTree";
    }   
    
    //Definimos el estilo seleccionado al item correcto
    $("#" + treeID)[0].className = "SelectedNodeTree";
}

Resultado final:

image                  image

Como podéis comprobar con tres simples funciones javaScript hemos dotado a nuestra aplicación una potente funcionalidad en el lado del cliente que mejora la experiencia de usuario y enriquece nuestras aplicación web.

 

CrossPosting http://lonetcamp.com

6 comentarios en “Buscar en un TreeView con Autocomplete y JQuery”

  1. Exelente muchas gracias ando iniciando en javascripts pero personas como usted nos impulsan a seguir adelante y evolucionar, deberas que me sacaste de un apuro jeje
    gracias

  2. El CDN es la referencia a las librerías que necesitas, pero están ubicadas en un servidor externo, de esta manera te beneficias de la rapidez de descarga, el cacheo y la compresion de los scripts.

    Puedes referenciar las librerías de AJAX.NET y JQuery.

    Solo tienes que poner la referencia script en tu cabecera de la librería que necesitas y ya está.

    Saludos y Gracias 😉

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *