style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-5164839828746352"
data-ad-slot="7563230308">

Autocompletar con JSON(Gson), Ajax, jQuery, Servlets y PostgreSQL

¡¡¡ Hola !!!

Este es mi segundo aporte a esta comunidad, se trata de un trabajo que me dejaron en mi servicio social el cual se integra con una aplicación web la cual maneja una gran cantidad de datos (RFC de contribuyentes)...

Espero les sea útil esto y como he dicho antes cual quier mejora o error por favor coméntenlo. GRACIAS

Clase conexión y query´s

public class Model{
public ArrayList<String> getNombres(String nombre)throws Exception{
                 ArrayList<String> list = new ArrayList<String>();
                 String data;
                 try( Connection conn = DriverManager.getConnection("jdbc:postgresql://localhost:5432/BandasRock");              
                           PreparedStatement ps1 = conn.prepareStatement("SELECT * FROM nombres  WHERE  nombres LIKE ?");
                         
                           ResultSet rs = ps1.executeQuery()
                                       
                                 ) {
                                 
                                   ps1.setString(1, nombre + "%");
                                while (rs.next()) {
                                         data = rs.getString("nombres");
                         list.add(data);
                                }
                        } catch (SQLException e) {
                            e.getCause();
                        }
                 return list;
                 }
         
}

Servlet llamado "controlador" por el método GET

import com.google.gson.Gson;
 ...
response.setContentType("application/json");
                try {
            String term = request.getParameter("term");
            System.out.println("Datos por llamada AJAX " + term); //muestra en consola lo escrito en el textbox  podemos quitarlo

           
            Model m= new Model();
           
            ArrayList<String> list = m.getNombres(term);

            String searchList = new Gson().toJson(list);
           
            response.getWriter().write(searchList);
           
    } catch (Exception e) {
            System.err.println(e.getMessage());
    }          

Archivo autocompletar.js que se encarga de la invocación de datos

$(document).ready(function() {
        $(function() {
                $("#search").autocomplete({    
                source : function(request, response) {
                $.ajax({
                        url : "controlador",
                        type : "GET",
                        data : {
                                term : request.term
                        },
                        dataType : "json",
                        success : function(data) {
                                response(data);
                        }
                });
        }
});
});
});

Por último el jsp

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div class="header">
        <h3>Autocompletar</h3>
        </div>
        <br>
        <div class="r-cont">
                <div class="ui-widget">
                        <input type="text" id="search" name="search" class="search"/>
                </div>
        </div>

¿ Que opinan ?

Nota. En mi clase Model he aplicado un poco lo que me comento el Sr. Ezamudio :D

Comentarios

Opciones de visualización de comentarios

Seleccione la forma que prefiera para mostrar los comentarios y haga clic en «Guardar las opciones» para activar los cambios.
Imagen de arterzatij

Muy Bien (Y)

Solo quedaria un poco de "sintaxis sugar" en JS

puedes cambiar el metodo ajax por getJson

y te quedaria algo asi:

$.getJSON(
    "controlador",  
    { term : request.term },
    function ( data ) {
        response(data);
    }
);

y en java talvez para ser consistente en tu metodo de programar:

Tu tienes:

Model m= new Model();
           
ArrayList<String> list = m.getNombres(term);

String searchList = new Gson().toJson(list);

y pudiera quedar

ArrayList<String> list = new Model().getNombres(term);

String searchList = new Gson().toJson(list);

De ahi no le veo nada raro, al menos del codigo que muestras.

Imagen de arterzatij

Otra cosa en JS esta parte

Otra cosa en JS esta parte del codigo esta de sobra:

$(document).ready(function() {
  // Body
});

eso y esto hacen lo mismo :)

$(function() {
  // Body
});

Hola, Eduardo (aka

Hola, Eduardo (aka @hellocannibal) ... sólo para recomendarte ampliamente dos recursos:

~~~

Imagen de hellocannibal

Gracias Arterzatij

Hey, muchas gracias por el apote, tienes razón yo me quede en lo antiguo de preparar mi archivo para su lectura con ese pedaso de codigo al igual tendre mucho en cuenta lo que mencionas sobre la llamada de mi objeto json, gracias :) !

Oye entre a tu blog y veo que manejas con frecuencia Spring no sé, cuando tengas tiempo me podrias recomendar algo sencillo para empezar sobre ese Framework. Saludos

Imagen de hellocannibal

Hola Jpaul !

Hoy mismo checare estos videos que me compartes, muchas gracias por el tiempo que te tomaste.
Extrañamente ayer estaba viendo algo igual de Singleton, pero esta mucho mejor el video que me compartes.
Saludos.

Imagen de arterzatij

Claro que si actualmente no

Claro que si actualmente no he tenido mucho tiempo, ya sabes cosas del oficio pero pronto colgare algun otro pedaso de codigo donde se muestran como hacer cosas :)

Y pudieras leer esto es algo de teoria pero viene bien

SOLID

Y empezar con este tutorial

Como sabes manejar JSP no te sera dificil el cambio a Spring, otras tecnologias introducen su propio markup language, que te facilita la vida pero para mi es mejor JSP :)

java.sql.Connection y Singleton

Una aclaración... La clase donde se obtiene la conexión no necesariamente tiene que ser un Singleton. Si sólo se utiliza Java SE/EE, es más común encontrar (en códigos bien construidos) algo como lo siguiente:

public class ConnectionProvider {

    public Connection getConnection() throws SQLException {
        try {
            DataSource dataSource = InitialContext.doLookup("java:/comp/env/jdbc/test");
            return dataSource.getConnection();
        } catch (NamingException e) {
            throw new SQLException(e);
        }
    }

}

Y, cuando no se tiene acceso al árbol JNDI (o cuando alguien desea evitar la configuración requerida), puedes crear tu propia instancia de javax.sql.DataSource. Por ejemplo, utilizando Apache Commons DBCP:

package com.company.app.util;

import java.sql.Connection;
import java.sql.SQLException;

import javax.sql.DataSource;

import org.apache.commons.dbcp.BasicDataSource;

public final class ConnectionProvider {

    private static final DataSource DATA_SOURCE;

    static {
        try {
            BasicDataSource dataSource = new BasicDataSource();
            dataSource.setDriverClassName("com.mysql.jdbc.Driver");
            dataSource.setUrl("jdbc:mysql://localhost/test");
            dataSource.setUsername("root");
            dataSource.setPassword("");
            dataSource.setValidationQuery("select now()");
            dataSource.setTestOnBorrow(true);
            dataSource.setRemoveAbandoned(true);
            DATA_SOURCE = dataSource;
        } catch (Throwable t) {
            throw new ExceptionInInitializerError(t);
        }
    }

    public static Connection getConnection() throws SQLException {
        return DATA_SOURCE.getConnection();
    }

}

P.D. Si deseas saber más sobre el patrón de diseño Singleton, está en Wikipedia. Para cada patrón de diseño que desees conocer, Wikipedia casi siempre es la mejor opción en cuanto a información sobre estos. Aunque ya tiene tiempo que salió, también puedes consultar este libro en línea.

style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-5164839828746352"
data-ad-slot="7563230308">