Programación, Tecnología y Más...

Programación, Tecnología y Más...

AutoComplete en Textbox y ComboBox C#

Bueno esta vez les traigo la manera de implementar el famoso automplete en los textbox y comobobox.

Esto sirve para facilitar el uso de nuestras aplicaciones a los usuarios y a la vez darle mas vistosidad.

Para este ejemplo cree una pequeña base de datos llamada Eurocopa(aprovechando que ya se acerca la euro xD), la base de datos solo tiene una tabla llamada países y con 2 campos id y país.

tabla

El diseño de la aplicación tambien sera algo sencillo solo tendrá un textbox y un combobox.

diseño

Ahora lo que aremos es agregar una nueva clase a nuestro proyecto en mi caso le llamare AutoCompleClass.cs y lo primero que aremos es agregar los siguientes espacios de nombres que necesitaremos.
using System.Data.SqlClient;
using System.Configuration;
using System.Windows.Forms;


Ahora lo que aremos es hacer la clase publica y estática y agregaremos 2 métodos que usaremos.
public static class AutoCompleClass
  {
      //metodo para cargar los datos de la bd
      public static DataTable Datos()
      {
          DataTable dt = new DataTable();

          SqlConnection conexion = new SqlConnection(ConfigurationManager.ConnectionStrings["default"].ToString());//cadena conexion

          string consulta = "SELECT * FROM PAISES"; //consulta a la tabla paises
          SqlCommand comando = new SqlCommand(consulta,conexion);

          SqlDataAdapter adap = new SqlDataAdapter(comando);

          adap.Fill(dt);
          return dt;
      }

      //metodo para cargar la coleccion de datos para el autocomplete
      public static AutoCompleteStringCollection Autocomplete()
      {
          DataTable dt = Datos();

          AutoCompleteStringCollection coleccion = new AutoCompleteStringCollection();
          //recorrer y cargar los items para el autocompletado
          foreach (DataRow row in dt.Rows)
          {
              coleccion.Add(Convert.ToString(row["pais"]));
          }

          return coleccion;
      }
  }

El primer método llamado Datos se usa para cargar los datos de nuestra base de datos y el método Autocomplete es el que servirá para cargar los datos del autocomplete, los 2 métodos son sencillos de comprender y lleva comentada las partes mas importantes.

Ahora lo que aremos es crear el evento load de nuestro formulario y tendrá el siguiente código.
private void Form1_Load(object sender, EventArgs e)
      {
          //cargar los datos para el autocomplete del textbox
          textBox1.AutoCompleteCustomSource = AutoCompleClass.Autocomplete();
          textBox1.AutoCompleteMode = AutoCompleteMode.Suggest;
          textBox1.AutoCompleteSource = AutoCompleteSource.CustomSource;

          // Cargo los datos que tendra el combobox
          comboBox1.DataSource = AutoCompleClass.Datos();
          comboBox1.DisplayMember = "pais";
          comboBox1.ValueMember = "id";

          // cargo la lista de items para el autocomplete dle combobox
          comboBox1.AutoCompleteCustomSource = AutoCompleClass.Autocomplete();
          comboBox1.AutoCompleteMode = AutoCompleteMode.Suggest;
          comboBox1.AutoCompleteSource = AutoCompleteSource.CustomSource;
      }

El primer bloque sirve para el autocomplete del textbox, que se hace con el uso de 3 propiedades, AutoCompleteCustomSource que es la propiedad que obtiene la colección de datos que servirán para el autocomplete, AutoCompleteMode indica el modo de autocomplete y AutoCompleteSource indica de dónde se sacarán las sugerencias de rellenado automático.

El segundo y tercer bloque es para el autocomplete del combobox que a diferencia del textbox este necesita de 2 listas una para cargar los datos normalmente con el DataSource y la otra para el autocomplete.

Capturas

textbox

combobox


Eso es todo espero les sirva saludos desde El Salvador.
Descargar Proyecto
Si quieren donarme para una soda lo pueden hacer aqui.


Publicar un comentario

16 Comentarios

  1. Muy bueno man, gracias.
    Se podria mejorar aplicando dos filtros?

    por ejemplo: en mi base[id][nombre][apellido]

    Tu ejemplo me funcionaria solo con nombre o apellido... pero si yo quisiera buscar por ambos, como lo hago?

    Saludos

    ResponderEliminar
    Respuestas
    1. Pues solo tendrías que llenar tu coleccion con el otro campo
      foreach (DataRow row in dt.Rows)
      {
      coleccion.Add(Convert.ToString(row["nombre"]));
      coleccion.Add(Convert.ToString(row["apellido"]));
      }

      Eliminar
  2. gracias por darte tiempo de hacer eso Bro me a sido de mucha utilidad..

    ResponderEliminar
  3. hola soy nuevo en esto pero me gustaria implementar el auto complete en un formulario html ,que se mueve con un php se podria implementar algo asi ? y tendrias algun ejemplo.
    tengo una bd con varias tablas ,una cliente ,otra pais y otra ciudad y quiero que la tabla cliente tome de la diudad el id .
    gracias por tu voluntad de compartir ,eres cool en lo que haces .saludos.

    ResponderEliminar
    Respuestas
    1. Lamento no poder ayudarte si se podría hacer con php pero no domino ese lenguaje te recomiendo busques en google seguro encuentras algo.

      Saludos

      Eliminar
  4. Hola, esta bueno el tuto pero tengo una consulta, a tu proyecto con un boton guardar en vez de autoyenado como es el codigo para guardar los datos en la bd, me explico mejor tengo una aplicacion que se llama tarea, el combobox me llena los datos de la jornada escolar y en el textbox quiero que indiquen el nombre de la tarea, cuando presiono el boton guardar, este es el codigo que necesito el de guardar a la BD los datos ingesados

    ResponderEliminar
    Respuestas
    1. Pues para eso tendrias que hacer un insert a tu tabla.


      using (SqlConnection conn = new SqlConnection(""))
      {
      string query = "INSERT INTO NombreTavla(Nombre,Apellido) VALUES(@Nombre,@Apellido)";
      id = RecuperarId() + 1;
      SqlCommand cmd = new SqlCommand(query, conn);
      cmd.Parameters.AddWithValue("Nombre", txtNombre.Text);
      cmd.Parameters.AddWithValue("Apellido", txtApellido.Text);
      conn.Open();
      try
      {
      cmd.ExecuteNonQuery();
      MessageBox.Show("Registro Ingresado con Exito...");
      }
      catch (Exception)
      {
      MessageBox.Show("Error no se Pudo Ingresar el Registro...");
      }
      }

      Revisa el metodo Insert de este otro articulo ahi inserto datos a la base de datos.
      Comprobar si Existe Registro en BD C# - VB.Net

      Eliminar
  5. Hola tengo una duda, utilice tu codigo y esta perfecto, pero ahora en un mismo Form quiero tener varios comboBox tendria que ahcer un autocomplete para cada uno o siemplemnte creo otroo abajo de ese?!
    te agradeceria mucho una respuesta GRACIAS

    ResponderEliminar
    Respuestas
    1. Hola pues si en todos los combobox piensas usar el mismo campo para el autocomplete solo tendrias que por cada combobox ir repitiendo el mismo código.

      Pero si para cada combobox usaras un campo diferente para el autocomplete entonces la cosa cambia ya que tendrias que para cada uno crearte un método AutoCompleteStringCollection para cargar el autocomplete con el campo para cada combobox.

      Saludos.

      Eliminar
  6. hola disculpa camarada como lo puedo implementar tu codido en Visual Basic 2008 desde sql server 2008 de antemano gracias

    ResponderEliminar
    Respuestas
    1. No hice el proyecto en vb.net pero puedes descargar un ejemplo similar desde aqui.
      AutoComplete ComboBox o TextBox

      Saludos.

      Eliminar
  7. Hola una pregunta, me dieron un proyecto ya comenzado, como le puedo, hacer para obtener un registro de una tabla en un texbox, mi codigo es el siguente.

    public DataTable ObtenerTurno()
    {
    VetecDALHelper helper;
    helper = new VetecDALHelper();
    DataTable dt = new DataTable();
    string query;

    query = "SELECT * FROM tbTurno ORDER BY strNombre";
    dt = helper.GetTableFromQuery(query);

    helper = null;
    return dt;
    }
    gracias, saludos

    ResponderEliminar
  8. Hola Mario.

    Según el código que has puesto estas retornando un datatable con todos los datos de la tabla, para obtener un registro en especifico tendrás que usar los rows del datatable.

    Justamente aquí explico como puedes hacerlo.
    Guardar Datos de Consulta a una BD en Variables

    Saludos.

    ResponderEliminar
  9. Les envio este codigo en el cual solo se modifico la forma de como cargar AutoCompleteCustomSource

    public void Cargar_cbLocalidad()
    {
    DataSet ds_Localidad = cLocalidad.TraerTodasLasLocalidades();
    // cb_Localidad es el combo a cargar
    cb_Localidad.DataSource = ds_Localidad.Tables[0];
    cb_Localidad.ValueMember = "Id_Localidad";
    cb_Localidad.DisplayMember = "Nombre";

    // Para la carga de datos para el AutoCompleteCustomSource utilizo el siguiente codigo
    AutoCompleteStringCollection stringCol = new AutoCompleteStringCollection();
    var s = (from DataRow c in ds_Localidad.Tables[0].Rows select c["Nombre"].ToString()).ToArray();
    stringCol.AddRange(s);

    cb_Localidad.AutoCompleteCustomSource = stringCol;
    cb_Localidad.AutoCompleteMode = AutoCompleteMode.Suggest;
    cb_Localidad.AutoCompleteSource = AutoCompleteSource.CustomSource;
    }

    ResponderEliminar
  10. Hola Yvan Duran no soy muy amigo de usar dataset(estan un poco defasados) prefiero las nuevas tecnologias como entity framework para el manejo de de datos o usar las clases ado.net por eso veras que en todos mis ejemplos nunca los uso.

    Saludos.

    ResponderEliminar