JQuery UI is one of the popular javascript libraries. We can use JQuery UI for many operations that provide visual effects, useful UI widgets, etc.

In this article, we will learn how to implement the autocomplete feature using JQuery UI. We will create a Spring MVC web application with Spring Boot and Thymeleaf.

Technologies used in this article are:

  • Spring Boot Version : 2.3.1.BUILD-SNAPSHOT
  • Java version 1.8
  • JQuery UI version : 1.12.1
  • Thymeleaf

Create Spring Boot application

Create a Spring Boot application with the required dependencies. 

We need spring-boot-starter-web and spring-boot-starter-thymeleaf dependencies to support web MVC operation and to use the Thymeleaf template, respectively.

pom.xml file

Below are the maven dependencies added to our Spring Boot application’s pom.xml file.

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

Create a web MVC Controller

Create a Spring web MVC controller class with the name AutoCompleteController.java

This controller adds a list of hard-coded String values, that contains names into the Model attribute and renders home.html page.

The Thymeleaf dependency in the application’s classpath, that auto-configures the static resources to render from src/main/resources/templates directory.

package com.asbnotebook.controller;

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

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class AutoCompleteController {

	@GetMapping("/")
	public String home(Model model) {
		List<String> names = new ArrayList<>();
		names.add("Arun");
		names.add("Akhil");
		names.add("Anju");
		names.add("Aman");
		model.addAttribute("names", names);
		return "home";
	}
}

Create the HTML page

Create a home.html page under the /src/main/respources/templates/ directory and add the following content.

On application startup, it renders the home.html file.

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Auto-complete example JQuery</title>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script th:inline="javascript">
	var real_data = /*[[${names}]]*/'noValue';
	$(document).ready(function() {
		$("#nameInput").autocomplete({
			minLength : 1,
			source : real_data,
			select : function(e, ui) {
				$("#nameOutput").text('You have selected : ' + ui.item.value);
				return ui.item.value;
			}
		})
	});
</script>
</head>
<body>
	<div class="ui-widget">
		<label for="nameInput">search Name: </label><input id="nameInput" />
		<h3 id="nameOutput"></h3>
	</div>
</body>
</html>

Important points to notice here are:

  • On line number 10, we are assigning the Model attribute value to the javascript variable with name real_data.
  • On line number 12, we are configuring the JQuery UI autocomplete function by calling autocomplete() function.
  • The HTML <input> element with id nameInput is the element, which will call the autocomplete function.
  • minLength: We have set minimum input length of input to 1 character.
  • source: This property sets the data source for the autocomplete widget.
  • select: Calls the specified function on selecting any of the autocomplete values.
  • On selecting any value, we are displaying the selected value by using an <div> element with the Id nameOutput. For more details, visit the documentation.

Testing the application

Start the Spring Boot application.

The application will start on 8080 port. We should be able to get the below screen at http://localhost:8080.

Jquery autocomplete example spring thymeleaf

The selected auto-suggested value will be displayed, as shown in the below image.

Jquery autocomplete example spring thymeleaf

Conclusion

In this article, we learned how to implement the autocomplete feature with Spring Web MVC application with Spring Boot and thymeleaf.

Subscribe to my mailing list to get the latest posts on your email. 🙂

Processing…
Success! You’re on the list.

The complete example code is available on GitHub.

You may also be interested in