[JQuery] Procédure d'implémentation de la fonction de saisie semi-automatique [Java / Spring]

Lisez d'abord ce qui suit

<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"
  src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
  src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

Exemple de code

autocomplete.js

$(function(){
	/**Implémenté pour qu'aucune modification ne soit requise même si le nom du projet est changé**/
	var pathname = location.pathname.split("/")[1];
	
	$.ajax({
        /**URL pour obtenir la liste pour la saisie semi-automatique*/
        url: "/" + pathname + "/getAutoComplete",
        dataType: "json",
        type: 'GET'
	}).then(function(searchResult){ /**La liste des résultats de la recherche est automatiquement saisie dans l'argument*/
		$('.txtKeywd').autocomplete({ /**ID du champ de saisie que vous souhaitez implémenter/Spécifiez la classe*/
			source : searchResult, /**Liste des candidats(Obligatoire)*/
			autoFocus: true, /**S'il faut se concentrer sur le haut de la liste lors de l'affichage de la liste*/
		    delay: 500, /**Temps de retard entre l'entrée de la touche et l'affichage de la liste (millisecondes)*/
		    minLength: 1 /**Nombre minimum de caractères pour que la fonction de saisie semi-automatique fonctionne*/
		});
		},function(){
	});
});

GetAutoCompleteController.java

import net.arnx.jsonic.JSON;

/**Contrôleur pour la saisie automatique du formulaire de recherche de produits. */
@Controller
@RequestMapping("/getAutoComplete")
public class GetAutoCompleteController {
	
    /**Passer tous les noms de produits à la saisie semi-automatique. */
	@ResponseBody
	@RequestMapping
	public String getAutoComplete(){
		List<String> nameList = getAutoCompleteService.getAllNameList();
        return JSON.encode(nameList);
	}
}

point important

• Puisque l'encodeur JSON utilise JSONIC, récupérez la balise de dépendance à partir d'ici et ajoutez-la à pom.xml. https://mvnrepository.com/artifact/net.arnx/jsonic

--Que passer à JSON.encode () Domaine: passez un objet et passez une carte (tableau associatif) avec le nom du champ comme clé à jsarchResult) List object: passez la liste telle quelle à jsarchResult)

référence

--Autocomplete est réalisé par Autocomponent de jQuery http://qiita.com/yu_0105/items/20c4f52e71020af42e7b

--JQUERY Résumé de l'interface de saisie semi-automatique http://blog.lowaivill.com/ui/jquery-autocomplete/

autoFocus: mise au point automatique sur le premier candidat dans le menu candidat delay: temps de retard entre l'entrée et l'exécution de la recherche minLength: nombre minimum de caractères d'entrée pour afficher les candidats

Voir ci-dessous pour d'autres options. Autocomplete Widget | jQuery UI API Documentation