[JQuery] Implementation procedure of AutoComplete function [Java / Spring]

First read the following

<link type="text/css" rel="stylesheet"
  href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<script type="text/javascript"
<script type="text/javascript"

Sample code


	/**Implemented so that no modification is required even if the project name is changed**/
	var pathname = location.pathname.split("/")[1];
        /**URL to get the list for autocomplete*/
        url: "/" + pathname + "/getAutoComplete",
        dataType: "json",
        type: 'GET'
	}).then(function(searchResult){ /**The list of search results is automatically included in the argument*/
		$('.txtKeywd').autocomplete({ /**Id of the input field you want to implement/Specify class*/
			source : searchResult, /**Candidate list(Mandatory)*/
			autoFocus: true, /**Whether to focus on the top of the list when displaying the list*/
		    delay: 500, /**Delay time from key input to list display (milliseconds)*/
		    minLength: 1 /**Minimum number of characters for the autocomplete function to work*/


import net.arnx.jsonic.JSON;

/**Controller for auto-complete of product search form. */
public class GetAutoCompleteController {
    /**Pass all product names to autocomplete. */
	public String getAutoComplete(){
		List<String> nameList = getAutoCompleteService.getAllNameList();
        return JSON.encode(nameList);

important point

--The JSON encoder uses JSONIC, so get the dependency tag from here and add it to pom.xml. https://mvnrepository.com/artifact/net.arnx/jsonic

--What to pass to JSON.encode () Domain: Pass an object and pass a map (associative array) with the field name as a key to jsarchResult) List object: pass the list as it is to jsarchResult)


--Autocomplete is realized by jQuery's Auto component http://qiita.com/yu_0105/items/20c4f52e71020af42e7b

--JQUERY Autocomplete / Input Completion Interface Summary http://blog.lowaivill.com/ui/jquery-autocomplete/

autoFocus: Autofocus on the first candidate in the candidate menu delay: Delay time from input to search execution minLength: Minimum number of input characters to display candidates

See below for other options. Autocomplete Widget | jQuery UI API Documentation

Recommended Posts

[JQuery] Implementation procedure of AutoComplete function [Java / Spring]
Implementation of like function in Java
Implementation of search function
[Java / Spring Boot] Spring security ④ --Implementation of login process
[Java / Spring Boot] Spring security ⑤ --Implementation of logout processing
Implementation of pagination function
Implementation of sequential search function
Implementation of like function (Ajax)
[Rails 6] Implementation of search function
Implementation of image preview function
[Java] Implementation of Faistel Network
[Rails] Implementation of category function
Implementation of category pull-down function
Implementation of gzip in java
[Rails] Implementation of tutorial function
[Rails] Implementation of like function
Implementation of tri-tree in Java
[Rails] Implementation of CSV import function
[Rails] Asynchronous implementation of like function
[Rails] Implementation of image preview function
[Rails] About implementation of like function
[Rails] Implementation of user withdrawal function
[Rails] Implementation of CSV export function
[Rails] Comment function implementation procedure memo
Let's create a TODO application in Java 4 Implementation of posting function
Let's create a TODO application in Java 6 Implementation of search function
Let's create a TODO application in Java 8 Implementation of editing function
Implementation of user authentication function using devise (2)
After 3 months of Java and Spring training
[Rails] I will explain the implementation procedure of the follow function using form_with.
Rails [For beginners] Implementation of comment function
Rails Basic CRUD function implementation procedure scaffold
[Rails 6] Implementation of SNS (Twitter) sharing function
Implementation of user authentication function using devise (3)
Spring Java
Features of spring framework for java developers
Survey of Java 8 Function, Consumer, Supplier, Predicate
[Vue.js] Implementation of menu function Implementation version rails6
[Ruby on rails] Implementation of like function
[Java] [Spring] Test the behavior of the logger
[Vue.js] Implementation of menu function Vue.js introduction rails6
Login function implementation by Spring Security (securityConfig)
[Rails / devise] Implementation of account information editing function / Procedure for changing redirect destination
[Rails] Implementation of search function using gem's ransack
Implementation of Ruby on Rails login function (Session)
[Rails 6] Implementation of inquiry function using Action Mailer
[FCM] Implementation of message transmission using FCM + Spring boot
[Rails] Implementation of image enlargement function using lightbox2
JAVA + STS (Spring Tool Suite) environment construction procedure
[Rails] Implementation of retweet function in SNS application
Implementation of search function Learning memo (portfolio creation)
Implementation of delete function (if you have foreign_key)
LINE Bot x Java (Spring Boot) construction procedure
DM function implementation
Implementation of GKAccessPoint
[Java] Overview of Java
[Java] Spring DI ③
Ruby on Rails <2021> Implementation of simple login function (form_with)
[Read Effective Java] Chapter 3 Item 12 "Considering Implementation of Comparable"
[Rails] Implementation of drag and drop function (with effect)
[Implementation procedure] Implement image upload function with Active Storage