[JQuery] Implementierungsverfahren der AutoComplete-Funktion [Java / Spring]

Lesen Sie zuerst Folgendes

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

Beispielcode

autocomplete.js

$(function(){
	/**Implementiert, sodass keine Änderung erforderlich ist, auch wenn der Projektname geändert wird**/
	var pathname = location.pathname.split("/")[1];
	
	$.ajax({
        /**URL, um die Liste für die automatische Vervollständigung abzurufen*/
        url: "/" + pathname + "/getAutoComplete",
        dataType: "json",
        type: 'GET'
	}).then(function(searchResult){ /**Die Liste der Suchergebnisse wird automatisch in das Argument eingegeben*/
		$('.txtKeywd').autocomplete({ /**ID des Eingabefelds, das Sie implementieren möchten/Geben Sie die Klasse an*/
			source : searchResult, /**Kandidatenliste(Verpflichtend)*/
			autoFocus: true, /**Gibt an, ob Sie sich beim Anzeigen der Liste auf den Anfang der Liste konzentrieren möchten*/
		    delay: 500, /**Verzögerungszeit von der Tasteneingabe bis zur Listenanzeige (Millisekunden)*/
		    minLength: 1 /**Mindestanzahl von Zeichen, damit die automatische Vervollständigungsfunktion funktioniert*/
		});
		},function(){
	});
});

GetAutoCompleteController.java

import net.arnx.jsonic.JSON;

/**Controller zum automatischen Ausfüllen des Produktsuchformulars. */
@Controller
@RequestMapping("/getAutoComplete")
public class GetAutoCompleteController {
	
    /**Übergeben Sie alle Produktnamen an Auto Complete. */
	@ResponseBody
	@RequestMapping
	public String getAutoComplete(){
		List<String> nameList = getAutoCompleteService.getAllNameList();
        return JSON.encode(nameList);
	}
}

wichtiger Punkt

• Da der JSON-Encoder JSONIC verwendet, rufen Sie das Abhängigkeitstag von hier ab und fügen Sie es zu pom.xml hinzu. https://mvnrepository.com/artifact/net.arnx/jsonic

--Was soll an JSON.encode () übergeben werden? Domäne: Übergeben Sie ein Objekt und eine Karte (assoziatives Array) mit dem Feldnamen als Schlüssel für jsarchResult. Listenobjekt: Übergeben Sie die Liste unverändert an jsarchResult.

Referenz

--Autocomplete wird von Autocomponent von jQuery realisiert http://qiita.com/yu_0105/items/20c4f52e71020af42e7b

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

Autofokus: Autofokus auf den ersten Kandidaten im Kandidatenmenü Verzögerung: Verzögerungszeit von der Eingabe bis zur Ausführung der Suche minLength: Minimale Anzahl von Eingabezeichen zum Anzeigen von Kandidaten

Weitere Optionen finden Sie weiter unten. Autocomplete Widget | jQuery UI API Documentation