Foros del Web » Programación para mayores de 30 ;) » .NET »

lograr efecto google search box

Estas en el tema de lograr efecto google search box en el foro de .NET en Foros del Web. Hola a todos, tengo un par de días tratando de hacer una caja de búsqueda estilo la de google y youtube en la que conforma ...
  #1 (permalink)  
Antiguo 30/09/2009, 08:54
 
Fecha de Ingreso: marzo-2009
Mensajes: 73
Antigüedad: 15 años, 8 meses
Puntos: 1
lograr efecto google search box

Hola a todos, tengo un par de días tratando de hacer una caja de búsqueda estilo la de google y youtube en la que conforma vas escribiendo debajo aparece una lista con ítems pero en Windows FORMS, trate con un combobox pero no logro el comportamiento deseado. En general funciona lo que hice pero no hay una buena experiencia para el usuario, me explico, en ocasiones hago click y se borra el texto o quedan otros ítems que no deberían o se oculta la lista cuando no debería (uso DroppedDown = True), en fin, sé que es problema de programación mío pero lo que pasa es que son mucho eventos los que se disparan y condiciones que se deben cumplir. Mi idea es hacerlo como supongo que lo hacen en WEB: usar 2 controles separados.

Usar un textbox y un listabox por separado y mostrar este último cuando sea necesario, bueno mi único problema es para ocultar el listbox.

El listbox me proporciona un evento ComboBox1_Click que se dispara cuando hago click sobre el control, pero quiero justamente lo contrario, saber cuando se hiso click fuera del control, es posible esto? O mas facil, conocen algun control que haga esto de google pero para winform?

gracias.
  #2 (permalink)  
Antiguo 30/09/2009, 09:27
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 16 años, 3 meses
Puntos: 1532
Respuesta: lograr efecto google search box

¿saber cuando se hace click fuera del control?, lo más sercano es en el mouseup pero cuando es encadenado desde mousedown en el control, es decir que presiones dentro del control y sueltes fuera (drag and drop), por el resto si quieres un Onclick fuera del control utiliza mejor su contenedor.

Por cierto ese efecto de google search es fácil con windows forms, simplemente controlas las teclas del teclado para moverte en el listbox, es similar, incluso más facil que hacerlo en html con ajax
  #3 (permalink)  
Antiguo 30/09/2009, 10:01
 
Fecha de Ingreso: marzo-2009
Mensajes: 73
Antigüedad: 15 años, 8 meses
Puntos: 1
Respuesta: lograr efecto google search box

Como mencionas, cuando decidí hacer este efecto también pensé que sería fácil, pero no sé si ya es porque me enrede mucho que no me sale del todo bien. A continuación pongo mi código(o uno de ejemplo) (atención mi intención al publicar mi código no es que hagan el trabajo por mí, simplemente es para motivos de ilustración). A primera instancia funciona bien, pero después de usarlo un rato se ve que no.

alomejor lo complique de mas :S no se

Código:
Public Class Form1

    Dim rdn As New Random
    Dim afecta As Boolean

    Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        AddHandler ComboBox1.GotFocus, AddressOf desp
        AddHandler ComboBox1.LostFocus, AddressOf ocul
    End Sub

    Private Sub desp(ByVal s As Object, ByVal e As EventArgs)
        ComboBox1.DroppedDown = True
    End Sub

    Private Sub ocul(ByVal s As Object, ByVal e As EventArgs)
        ComboBox1.DroppedDown = False
    End Sub

    Private Sub llena()
        'esta funcion simula una consulta a la base de datos

        ComboBox1.Items.Clear()

        Dim i As Integer = rdn.Next(3, 10)
        Dim j
        For j = 0 To i
            Dim s As String = ""
            Dim len As Integer = rdn.Next(5, 20)
            Dim k
            For k = 0 To len
                s += Chr(rdn.Next(0, 20) + 97).ToString
            Next
            ComboBox1.Items.Add(s)
        Next
    End Sub

    Private Sub ComboBox1_KeyDown(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyEventArgs) Handles ComboBox1.KeyDown
        If e.KeyCode = Keys.Down OrElse e.KeyCode = Keys.Up Then
            afecta = False
        Else
            afecta = True
        End If
    End Sub

    Private Sub ComboBox1_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ComboBox1.TextChanged
        If ComboBox1.Text.Length > 3 Then
            Dim ini As Integer = ComboBox1.SelectionStart

            llena()

            ComboBox1.SelectionLength = 0
            ComboBox1.SelectionStart = ini
        Else
            Dim ini As Integer = ComboBox1.SelectionStart

            ComboBox1.Items.Clear()

            ComboBox1.SelectionStart = ini
        End If
    End Sub

End Class
  #4 (permalink)  
Antiguo 01/10/2009, 09:03
 
Fecha de Ingreso: marzo-2009
Mensajes: 73
Antigüedad: 15 años, 8 meses
Puntos: 1
Respuesta: lograr efecto google search box

bueno, en su defecto, conocen algun control que haga esto? y si no, que me recomiendan ¿usar solo un combo box o un textbox junto con un listbox?
  #5 (permalink)  
Antiguo 01/10/2009, 09:22
 
Fecha de Ingreso: septiembre-2009
Mensajes: 73
Antigüedad: 15 años, 1 mes
Puntos: 0
Respuesta: lograr efecto google search box

saber cuando se hiso click fuera del control, prueba con el evento lostfocus
  #6 (permalink)  
Antiguo 01/10/2009, 10:09
 
Fecha de Ingreso: marzo-2009
Mensajes: 73
Antigüedad: 15 años, 8 meses
Puntos: 1
Respuesta: lograr efecto google search box

de hecho si trate pero solo se dispara cuando otro control obtiene el foco, es decir, si haces click en formulario donde no hay nungun control no se dispara


AddHandler ComboBox1.LostFocus, AddressOf ocul
  #7 (permalink)  
Antiguo 02/10/2009, 09:34
 
Fecha de Ingreso: marzo-2009
Mensajes: 73
Antigüedad: 15 años, 8 meses
Puntos: 1
Respuesta: lograr efecto google search box

Ya llevo muchos días con esto y nomas no me sale, ahora si solicito un poquito de su ayuda, maycolalvarez me podrías poner un ejemplo de cómo lo arias tu? Si no es mucha molestia, si no se puede pues ni modo :(
  #8 (permalink)  
Antiguo 02/10/2009, 14:23
 
Fecha de Ingreso: noviembre-2008
Mensajes: 18
Antigüedad: 16 años
Puntos: 0
Respuesta: lograr efecto google search box

Te mando un ejemplito que hace mas o menos lo que pides, ahi lo checas y nos comentas como te fue...

Código:
        private void button1_Click(object sender, EventArgs e)
        {
            //Aqui realizas la acion que necesites y por ultimo ocultas el listbox
            if (listBox1.Visible == true)
            {
                listBox1.Visible = false;
            }
        }

        private void textBox1_TextChanged(object sender, EventArgs e)
        {
            //Limpiamos el Listbox
            listBox1.Items.Clear();

            string[] lista = new string[10];
            //Cargas el String con tus coincidencias
                       
            lista[0] = "Mc Laren";
            lista[1] = "Mastreta MXT";
            lista[2] = "Ferrari";
            lista[3] = "Lamborghini Gallardo";
            lista[4] = "Lamborghini Diablo";
            lista[5] = "Skyline";
            lista[6] = "Porshe Carrera GT";
            lista[7] = "Ford GT40";
            lista[8] = "Bugatti Veyron";
            lista[9] = "Ford Mustang GT500";
                        
            int size = 0; //este lo agarramos para pintar el tamaño del listbox
            string muestra;// para agregar datos al listbox

            for (int i = 0; i < lista.Length; i++)
            {
                if (textBox1.Text == "")
                {}
                else
                    try
                    {
                        //Compara si lo que estas escribiendo es igual a algo dentro de
                        //las coincidencias
                        if (String.Compare(lista[i].Substring(0, textBox1.Text.Length),textBox1.Text, true) == 0)
                        {
                            muestra = lista[i];
                            size++;
                            listBox1.Items.Add(muestra); //Agrega las coincidencias
                        }
                    }
                    catch
                    { }
            }

            //Yo lo multiplico por 15 y me forma bien el listbox
            size = size * 15;
            //El primer entero(168) es el tamaño de mi texbox ahi lo cambias por el
            //de tu texbox
            listBox1.Size = new System.Drawing.Size(168, size);
            //Hacemos visible el Listbox con las coincidencias encontradas
            listBox1.Visible = true;
        }
nadamas lo unico que falta, es que al momento de presionar el keydown, se seleccione la lista...pero eso ia lo checas tu...de todos modos ahi nos avisas como te fue con el code...

P.D. Disculpa que el code esta en C#, pero pos ahi nomas lo pasas
  #9 (permalink)  
Antiguo 02/10/2009, 15:46
 
Fecha de Ingreso: enero-2007
Ubicación: Tingo María - Perú
Mensajes: 399
Antigüedad: 17 años, 9 meses
Puntos: 13
Respuesta: lograr efecto google search box

Si la memoria no me falla a partir de VS.Net 2005 los textbox incluyen una propiedad llamada: AutoCompleteCustomSource que puedes usar, pero si estas en una version anterior tambien hay forma de hacerlo revisa este link si te ayuda:
http://www.codeproject.com/KB/cs/Aut...teTextBox.aspx
__________________
Vivir para ser buenos y ser buenos para servir mejor.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:33.