Saisie semi-automatique dans JSP-Servlet

 

Créer un projet Maven

Sur l’Eclipse, créez un projet Maven

Configure pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>autocomplete-in-jsp-servlet</groupId>
	<artifactId>autocomplete-in-jsp-servlet</artifactId>
	<packaging>war</packaging>
	<version>0.0.1-SNAPSHOT</version>
	<name>Learn JSP-Servlet with Real Apps</name>
	<url>http://maven.apache.org</url>
	<dependencies>

		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>3.8.1</version>
			<scope>test</scope>
		</dependency>

		<dependency>
			<groupId>javax.servlet.jsp.jstl</groupId>
			<artifactId>javax.servlet.jsp.jstl-api</artifactId>
			<version>1.2.1</version>
		</dependency>

		<dependency>
			<groupId>taglibs</groupId>
			<artifactId>standard</artifactId>
			<version>1.1.2</version>
		</dependency>

		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>javax.servlet-api</artifactId>
			<version>3.1.0</version>
			<scope>provided</scope>
		</dependency>

		<dependency>
			<groupId>com.google.code.gson</groupId>
			<artifactId>gson</artifactId>
			<version>2.8.5</version>
		</dependency>

	</dependencies>
	<build>
		<finalName>autocomplete-in-jsp-servlet</finalName>
	</build>
</project>

Configurer le web.xml

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
 	<welcome-file-list>
 		<welcome-file>index.jsp</welcome-file>
 	</welcome-file-list>
</web-app>

Page de redirection

Créez un nouveau fichier JSP nommé index.jsp dans le dossier src\main\webapp.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1" isELIgnored="false"%>
<jsp:forward page="monURI"></jsp:forward>

Créer des entités

Créez un nouveau package nommé com.formationkilo.autocomplete-in-jsp-servlet.entities. 

Dans ce package, créez une nouvelle classe java nommée Product.java comme ci-dessous :

package com.formationkilo.autocompletion-in-jsp-servlet.entities;

import java.io.Serializable;

public class Product implements Serializable {

	private static final long serialVersionUID = 1L;

	private String id;
	private String name;
	private double price;

	public Product() {
	}

	public Product(String id, String name, double price) {
		this.id = id;
		this.name = name;
		this.price = price;
	}

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public double getPrice() {
		return price;
	}

	public void setPrice(double price) {
		this.price = price;
	}

}

Créer des modèles

Créez un nouveau package nommé com.formationkilo.autocomplete-in-jsp-servlet.models. Dans ce package, créez une nouvelle classe java nommée ProductModel.java comme ci-dessous :

package com.formationkilo.autocomplete-in-jsp-servlet.models;

import java.util.ArrayList;
import java.util.List;

import com.formationkilo.autocomplete-in-jsp-servlet.entities.Product;

public class ProductModel {

	private List<String> products;

	public ProductModel() {
		products = new ArrayList<String>();
		products.add(new Product("p01", "computer 1", 20));
		products.add(new Product("p02", "computer 2", 21));
		products.add(new Product("p03", "laptop 1", 22));
		products.add(new Product("p04", "laptop 2", 3));
		products.add(new Product("p05", "laptop 3", 7));
	}

	public List<String> search(String keyword) {
		List<String> names = new ArrayList<String>();
		for (Product product : products) {
			if (product.getName().toLowerCase().contains(keyword.toLowerCase())) {
				names.add(product.getName());
			}
		}
		return names;
	}

}

Créer des servlets

Créez un nouveau package nommé com.formationkilo.autocomplete-in-jsp-servlet.servlets. 

Dans ce package, créez de nouveaux servlets comme ci-dessous :

Servlet de démonstration

Dans le package com.formationkilo.autocomplete-in-jsp-servlet.servlets, créez un nouveau servlet nommé KiloServlet comme ci-dessous :

package com.formationkilo.autocomplete-in-jsp-servlet.servlets;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/monURI")
public class KiloServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	public KiloServlet() {
		super();
	}

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.getRequestDispatcher("dossier/index.jsp").forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
	}

}

Ajax Servlet

Dans le package com.formationkilo.autocomplete-in-jsp-servlet.servlets, créez un nouveau servlet nommé AjaxServlet comme ci-dessous :

package com.formationkilo.autocomplete-in-jsp-servlet.servlets;;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.demo.models.ProductModel;
import com.google.gson.Gson;

@WebServlet("/ajax")
public class AjaxServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	public AjaxServlet() {
		super();
	}

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		Gson gson = new Gson();
		String term = request.getParameter("term");
		ProductModel productModel = new ProductModel();
		PrintWriter out = response.getWriter();
		out.print(gson.toJson(productModel.search(term)));
		out.flush();
		out.close();
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
	}

}

Créer des pages JSP

Créez un nouveau dossier nommé dossier dans le dossier src\main\webapp. Dans ce dossier, créez de nouveaux fichiers JSP comme ci-dessous :

Page d’index

Dans le dossier src\main\webapp\dossier, créez un nouveau fichier JSP nommé index.jsp comme ci-dessous :

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1" isELIgnored="false"%>
<html>
<head>
<title>AutoComplete</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
	$(document).ready(function() {

		$('#search').autocomplete({
			source: '${pageContext.request.contextPath}/ajax'
		});

	});
</script>
</head>
<body>

	<h3>AutoComplete</h3>
	<form>
		<input type="text" id="search">
	</form>

</body>
</html>