<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>
autocomplete.js
$(function(){
/**Implemented so that no modification is required even if the project name is changed**/
var pathname = location.pathname.split("/")[1];
$.ajax({
/**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*/
});
},function(){
});
});
GetAutoCompleteController.java
import net.arnx.jsonic.JSON;
/**Controller for auto-complete of product search form. */
@Controller
@RequestMapping("/getAutoComplete")
public class GetAutoCompleteController {
/**Pass all product names to autocomplete. */
@ResponseBody
@RequestMapping
public String getAutoComplete(){
List<String> nameList = getAutoCompleteService.getAllNameList();
return JSON.encode(nameList);
}
}
--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