Js:https://github.com/devbridge/jquery-autocomplete
1. Introduction of JS, the introduction of CSS
--start---------------------------------------------------------------------------------------------
1.autoComplete () method
$ (selector). AutoComplete (Configuration object);
Specific use
Configuration Properties
1) Lookup
Type: array of strings or arrays of objects
Description: Use local data note: If an array of objects is used to specify the information that is prompted using the Value property (required), the other members of the object are arbitrarily set
Case:
var data=[' Sun Victory ', ' private library ';
or the standard format should be the following:
var data = [{value: ' Sun wins ', data: ' Sunshengli '},{value: ' Private library ', data: ' http:sifangku.com '}];
You can also add a variety of other data in the object!
2) OnSelect
Type: function (suggestion) {}
Description: A callback function that executes when the user chooses from the prompt message, the This code inside the callback function
The current input control
Parameter description: suggetsion: Select the data, (that is, click or press ENTER to build the selected data, if it is the object this will be returned)
If there is only a string. Then an object is returned, with the value and Data property
This function can also be submitted .....
3) Minchars
Type: Digital
Description: Automatic prompt when entering a few characters at least
Default: 1 (Direct prompt if set to 0)
One) serviceurl
Type: string or callback function
Description: Server segment URL address, if the function is to return the server's URL address inside the function, if you use local data, omit this parameter
Note: The server-side return data must conform to the following format
{
"Suggestions": ["Sunshengli", "Sifangku"]
} or
{
"Suggestions": [{"Value": "Sunshengli", "Data": "Haahha"},{"value": "Sunshengli", "Data": "Haahha"}]
}
ParamName)
Type: string
Description: The name used when sending user-filled data to the server
Default: Query
Deferrequestby)
Type: Digital
Description: Delay the number of milliseconds for an AJAX request (mitigating server pressure can give a slight delay)
Default: 0
NoCache)
Type: Boolean value
Note: Do not cache automatically prompted data, if set to true, the data will not be cached, then the user enters the same query content when the server initiates a request
Default: False (that is, the cache is silently reserved)
FormatResult)
Type: function (suggestion,currentvalue) {}
Description: Format the returned data, how many data, how many times the function executes
Function parameter Description: suggetion: Prompt data at current execution
CurrentValue: Data for the query entered by the user
Formatted data needs to return with return
<%@ Page Language="Java"ContentType="text/html; Charset=utf-8"pageencoding="UTF-8"%><% StringNameSpace=Request.getcontextpath ();%><% StringProjectPath=Request.getscheme ()+ "://" +Request.getservername ()+ ":" +Request.getserverport ()+NameSpace+ "/";%><!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd "><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"><title>Test AutoComplete</title><Scriptsrc= "<%=projectpath%>js/jquery-1.12.1.js"></Script><Scriptsrc= "<%=projectpath%>js/autocomplete/jquery.autocomplete.js"></Script><Linkrel= "stylesheet"type= "Text/css"href= "<%=projectpath%>style/styles.css"><Scripttype= "Text/javascript"> $(function() { varMyData=[{value:'Sun Shenli', Data:'Sunshengli'}, {value:'Private Library', Data:'http:sifangku.com'}, {value:'Rocchi', Data:'Luoqi'}, {value:'Show Luo', Data:'QQ'}, {value:'Rozhigi', Data:'ww' } ]; $("#autocomplete"). AutoComplete ({//Lookup:mydata,OnSelect:function(suggestion) {//the arguments to the function are all formal parameters!!!Console.log (suggestion); }, //Minchars:2,serviceurl:'/sfk_bbs02/getnamelist', FormatResult:function(suggestion,currentvalue) {return '<div>'+Suggestion.value+Suggestion.count+'</div>' } }); });</Script></Head><Body> <!--Test AutoComplete - <form>Name:<inputID= "AutoComplete"type= "text"name= "ABC"> </form></Body></HTML>
Java
@ResponseBody @RequestMapping ("/getnamelist") PublicString getnamelist () {/*** {"suggestions": [{"Value": "Sunshengli", "Data": "Haahha"},{"value": "Sunshengli", "Data": "Haahha"}]}
*/Log.info ("Into Getnamelist"); String names= "{\" suggestions\ ": [\" Sunshengli\ ", \" Show Luo \ ", \" Lozhih \ ", \" Sifangku\ "]}"; String Names2= "{\" suggestions\ ": [{\" value\ ": \" sunshengli\ ", \" data\ ": \" hahahah\ ", \" count\ ": 10},{\" value\ ": \" luozhizhi\ ", \" Data\ ": \" qq\ ", \" count\ ": 10}]}"; returnNames2; }}
Auto-Complete--autocomplete plugin
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
