lunes, 28 de septiembre de 2015

Combo autocomplete VS 2005 Framework 2.0 VB.Net con jQueryUI

Hola, a todos los geeeks. El otro día me pidieron hacer combo autocomplete para una aplicación Web en Visual Studio 2005, Framework 2.0 y además con VB.NET. Tarea que no fue de media hora como pensé.

Primero en aplicación Web se llaman DropDownList y no Combobox como en las aplicaciones de Escritorio.

Vamos a usar jQuery y jQueryUI.

Lo otro importante es que no implementaremos un combo propiamente autocomplete, sino que haremos un textbox autocomplete, ese el truco. Se verá como un combo pero no lo es.

Código de ASPX

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="TestCombo._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Demo autocomplete textbox VB.Net 2005 jQuery</title>    
    <link rel="stylesheet" href="css/jquery-ui.css"> 
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> 
    <script src="js/jquery-ui-1.10.3.custom.js"></script>
</head>
<body>

    <% =Autocompletar()%>    

    <script type="text/javascript">
        $(document).ready(function() {
         Autocompletar();       
        });
    </script>

    <form id="form1" runat="server">        
        <input type="text" name="combo" id="combo" class="combo" placeholder="Escriba dos letras" maxlength="50" size="50" />        
        <br />
        Valores posibles:<br /><br />
        Hamburguesa, Hamburguesa c/ queso, Quesadillas, Torta de pierna, Torta mixta, Torta ahogada, Paquete Torta con refresco, Refresco, Café, Té 
</form>
</body>
</html>

Código de VB.NET

Partial Public Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Public Function Autocompletar() As String
        Dim tags As String

        tags = "'Hamburguesa','Hamburguesa c/ queso','Quesadillas','Torta de pierna','Torta mixta','Torta ahogada','Paquete Torta con refresco','Refresco','Café','Té'"

        Autocompletar = ""

    End Function

End Class
La Solución se ve así:

Probando

Si seleccionamos un elemento se ve el combo:

Luego si usamos la consola de Chrome con F12 y ejecutamos

$('#combo').val()

La consola entrega: "Paquete Torta con refresco"