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.

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" /&gt;
  &lt;asp:TreeView ID="TreeView1" runat="server" CssClass="TreeN"&gt;
&lt;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.

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 &lt; 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 &lt; es.length; index++) {
        es[index].className = "ItemNodeTree";
    }
    //Definimos el estilo seleccionado al item correcto
    $("#" + treeID)[0].className = "SelectedNodeTree";
}

Resultado final:

       

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.

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s