[How to] TextBox con Autocompletar

A menudo en nuestras aplicaciones, queremos facilitarle la vida a los usuarios (aún más), entonces para mejorar la experiencia de uso de nuestros programas quisiéramos que los usuarios no tuvieran que digitar nada, o por lo menos, que fuera muy poco, para esto .NET tiene la solución, el control TextBox tiene unas propiedades espectaculares que facilitan este trabajo.

Para este ejemplo, crearemos una aplicación de WinForms, y arrastramos un TextBox a su interior (textBox1), no necesitamos más para probar esta funcionalidad.

El autocomplete de este control lo puedes trabajar de muy variadas formas, la mejor, es haciéndolo desde un origen de datos y asignándolo mediante código, así agregas dinamismo a la solución.

Para este ejemplo, crearé un método del tipo List, que nos retorna una lista de países, así:

private List getPaises()
{
      var listPaises = new List<string>();
      listPaises.Add("Colombia");
      listPaises.Add("Venezuela");
      listPaises.Add("Ecuador");
      listPaises.Add("Peru");
      listPaises.Add("Brasil");
      return listPaises;
}

A este método acudiremos desde el evento Load de nuestro Form, de la siguiente forma:

private void Form1_Load(object sender, EventArgs e)
{
      var allPaises = getPaises();            
}

Una vez que tenemos nuestro origen de datos empezamos a trabajar con las propiedades del TextBox que nos permiten la funcionalidad de autocompletar, la primera propiedad que trabajaremos será la AutoCompleteMode esta propiedad establece el “efecto visual” que tendrá nuestro autocomplete, sus valores pueden ser:

Append: Autocompleta en la misma línea mediante se va escribiendo:

Autocompletmode Append

None: Sin autocompletar, pese a que agreguemos el origen de datos, este valor impide el autocompletar

Suggest: Ofrece las opciones en un “desplegable” abajo del control:

Autocompletemode.Suggest

 SuggestAppend: Se aplica tanto a Suggest como a Append. 

Como deseamos que nuestro TextBox autocomplete a partir de una lista de datos propia, trabajaremos con la propiedad AutoCompleteCustomSource, esta propiedad es del tipo AutoCompleteStringCollection, es decir, solo le podemos asignar valores de este tipo, para esto nos creamos un objeto de esta clase y le agregamos nuestra lista de datos, así:

private void Form1_Load(object sender, EventArgs e)
{
     var allPaises = getPaises();
     textBox1.AutoCompleteMode = AutoCompleteMode.SuggestAppend; //Es el mas bonito
     AutoCompleteStringCollection accl = new AutoCompleteStringCollection();            
     accl.AddRange(allPaises.ToArray()); //convertimos la lista en un Array    
}

Ahora solo falta asignarle al TextBox nuestro el origen de datos para autocompletar, para esto acudimos a la propiedad ya mencionada (AutoCompleteCustomSource) y definimos el modo de autocompletado a usar, esto lo definimos en la propiedad AutoCompleteSource, así:

private void Form1_Load(object sender, EventArgs e)
{
      var allPaises = getPaises();
      textBox1.AutoCompleteMode = AutoCompleteMode.SuggestAppend;
      AutoCompleteStringCollection accl = new AutoCompleteStringCollection();            
      accl.AddRange(allPaises.ToArray());
      textBox1.AutoCompleteCustomSource = accl;
      textBox1.AutoCompleteSource = AutoCompleteSource.CustomSource;
} 

De este modo podemos actualizar con una lista de datos propios ¿Pero si deseas que autocomplete con direcciones URL p. ej.? basta con redefinir el valor de la propiedad AutoCompleteSource por AllUrl, así:

textBox1.AutoCompleteSource = AutoCompleteSource.AllUrl;

Puedes usarlo como desees, explóralo y sácale el potencial.

Descarga el ejemplo

Espero les sea de utilidad

Hasta el próximo post.

Anuncios
[How to] TextBox con Autocompletar

5 comentarios en “[How to] TextBox con Autocompletar

    1. Trataré de hacerlo 🙂

      Por ahora, recuerda que, el diminutivo de “menso” se forma sustituyendo la -o- por los sufijos (ito, ita, etc.). Es decir, se escribe “mensito” y no “mencito”.

      Saludos

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