Autocompleter with Jquery and Servlet
Output Screen
Project Structure
index.html
<html>
<head>
<link rel="stylesheet" href="//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" src="js/my.js"></script>
</head>
<body>
<div class="ui-widget">
Country: <input id="country" placeholder="Enter Country Name...">
</div>
</body>
</html>
my.js
$(document).ready(function() {
$(function() {
$("#country").autocomplete({
source: function(request, response) {
$.ajax({
url: "country",
type: "POST",
data: { term: request.term },
dataType: "json",
success: function(data) {
response(data);
}
});
}
});
});
});
Country.java
package deepsingh44.blogspot.com.model;
public class Country {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
CountryController.java
package deepsingh44.blogspot.com.controller;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
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.google.gson.Gson;
import com.google.gson.GsonBuilder;
import deepsingh44.blogspot.com.model.Country;
@WebServlet("/country")
public class CountryController extends HttpServlet {
List<Country> list = new ArrayList<>();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("application/json");
dataSet();
String name = req.getParameter("term");
List<String> ll = search(name);
Gson g = new Gson();
String jsondata = g.toJson(ll);
System.out.println(jsondata);
resp.getWriter().write(jsondata);
}
private List<String> search(String name) {
List<String> names = new ArrayList<>();
for (Country item : list) {
if (item.getName().toLowerCase().startsWith(name)) {
names.add(item.getName());
}
}
return names;
}
private void dataSet() {
list = new ArrayList<>();
Country c1 = new Country();
c1.setName("India");
Country c2 = new Country();
c2.setName("America");
Country c3 = new Country();
c3.setName("Russia");
Country c4 = new Country();
c4.setName("France");
Country c5 = new Country();
c5.setName("South Africa");
Country c6 = new Country();
c6.setName("New Zealand");
Country c7 = new Country();
c7.setName("Spain");
Country c8 = new Country();
c8.setName("Argentina");
Country c9 = new Country();
c9.setName("Malaysia");
Country c10 = new Country();
c10.setName("Afghanistan");
list.add(c1);
list.add(c2);
list.add(c3);
list.add(c4);
list.add(c5);
list.add(c6);
list.add(c7);
list.add(c8);
list.add(c9);
list.add(c10);
}
}
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/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>HtmlDemo</groupId>
<artifactId>HtmlDemo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<build>
<sourceDirectory>src</sourceDirectory>
<plugins>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.5.1</version>
<configuration>
<source>1.8</source>
<target>1.8</target>
</configuration>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>3.0.0</version>
<configuration>
<warSourceDirectory>WebContent</warSourceDirectory>
</configuration>
</plugin>
</plugins>
</build>
<dependencies>
<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.6</version>
</dependency>
</dependencies>
</project>
No comments:
Post a Comment