JQuery UI Autocomplete Example With Spring Boot

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. We can create the autocomplete functionality using the Jquery UI library very easily.

In this article, we will learn how to implement the autocomplete feature using JQuery UI. Also, 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

Table of Contents

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 also 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.

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

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

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 an html page with the name home under the /src/main/respources/templates/ folder and also 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 also calls the autocomplete function.
  • minLength: We have set minimum input length of input to one character.
  • source: This property sets the data source for the autocomplete widget.
  • select: Calls the specified function on selecting any of the autocomplete values.
  • Finally, 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 also be able to get the below screen at http://localhost:8080.

Jquery autocomplete example spring thymeleaf

Finally, 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.

Also, the complete example code is available on GitHub.