<! DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML 1.0transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>jquery AutoComplete plugintest</title>
<% @pagecontentType = "Text/html;charset=utf-8" language= "java"%>
<% @pageisELIgnored = "false"%>
<metahttp-equiv= "Content-type" content= "Text/html;charset=utf-8" >
<link rel= "stylesheet" type= "Text/css" href= "${ctx}/css/jquery.autocomplete.css"/>
<script type= "Text/javascript" src= "${ctx}/js/jquery/jquery-1.7.2.min.js" ></script>
<script type= "Text/javascript" src= "${ctx}/js/jquery/jquery.autocomplete.min.js" ></script>
<script type= "Text/javascript" >
JQuery (document). Ready (function () {
var emails = [
{name: "Peter Pan", To: "Peter@pan.de"},
{Name: "Molly", To: "Molly@yahoo.com"},
{name: "Forneria Marconi", To: "live@japan.jp"},
{name: ' Master <em>Sync</em> ' to: ' 205bw@samsung.com '},
{name: ' Dr. <strong>Tech</strong> de Log ' to: ' g15@logitech.com '},
{name: "Don Corleone", To: "Don@vegas.com"},
{name: "Mc Chick", To: "Info@donalds.org"},
{name: "Donnie Darko", To: "Dd@timeshift.info"},
{name: ' Quake the Net ' to: ' webmaster@quakenet.org '},
{name: ' Dr. Write ' to: ' write@writable.com '},
{name: "GG Bond", To: "Bond@qq.com"},
{Name: "Beijing", To: "Beijing@163.com"},
{name: "ZhuZhu Xia", To: "Zhuzhu@qq.com"},
{Name: "Peiping", To: "Beiping@163.com"},
{name: "North Drift", to: "Beipiao@163.com"},
{name: "Northern Wei", To: "Beiwei@163.com"}
];
$ (' #keyword '). AutoComplete (Emails, {
Number of entries in Max:8,//List
minchars:0,//automatic completion of the minimum characters filled before activation
WIDTH:200,//hint width, overflow hidden
SCROLLHEIGHT:200,//Tip height, overflow display scroll bar
Matchcase:false,//IS case sensitive
Matchcontains:false,//contains a match, is the data in the parameters, whether as long as the data contained in the text box is displayed
Autofill:false,//Auto Fill
Formatitem:function (row, I, max) {
return i + '/' + Max + ': ' + row.name + ' [' + row.to+ '] ';
},
Formatmatch:function (row, I, max) {
return row.name + row.to;
return row.name;
},
Formatresult:function (Row) {
return row.to;
}
). Result (function (event, row, formatted) {
$ ("#content"). Val (row.to);
});
});
</script>
<body>
<div>
Blur match:
<inputtype= "text" id= "keyword"/>
-->
<inputtype= "text" id= "content"/>
</div>
</body>
--------------------------------------------------------------------------------------------------
To modify the Jquery.autocompletet.css file code example:
. ac_results {
padding:0px;
border:1px solid #7F9DB9; The edge color of the Drop-down box displayed
Background-color: #FFFFD9; Initialize the default background color of the format
Overflow:hidden;
z-index:99999;
}
. ac_results UL {
width:100%;
List-style-position:outside;
List-style:none;
padding:0;
margin:0;
}
. ac_results Li {
margin:0px;
PADDING:2PX 5px;
Cursor:default;
Display:block;
If width would be 100% Horizontalscrollbar would apear when scroll mode would be used
width:100%;
Font:menu;
font-size:12px;
It is very important, if line-height notsetted or setted in relative units
Be Broken Infirefox
line-height:16px;
Overflow:hidden;
}
. ac_loading {
Background:white url ('/images/indicator.gif ') Rightcenter no-repeat;
}
. ac_odd {
Background-color: #eee;
Background-color: #FFF3B5;
Background-color: #DDDDDD; Initialize format default background color (interlacing)
}
. ac_over {
Background-color: #0A246A;
Background-color: #196AC5; Color when the mouse passes
Color:white; The font color that the mouse passes through
}
--------------------------------------------------------------------------------------------------
"Chinese Version usage instructions":
Parameter description:
* Minchars (number):
The number of characters that the user needs to enter at least before triggering the AutoComplete. Default:1, if set to 0, double click in the input box or delete the contents of the input box to display the list
* Width (number):
Specifies the width of the Drop-down box. Width of default:input element
* MAX (number):
AutoComplete Drop-down Displays the number of items. default:10
* Delay (number):
The delay time (in milliseconds) to activate AutoComplete after a keystroke. Default: Remote for 400 local 10
* AutoFill (Boolean):
To automatically fill the input box with the value of the user's current mouse when the user chooses. Default:false
* Mustmatch (Booolean):
If set to True,autocomplete will only allow matching results to appear in the input box, all when the user entered an illegal character will not get the Drop-down box. Default:false
* Matchcontains (Boolean):
Determines whether a match is to be viewed inside a string when comparing, such as whether BA matches the BA in Foo Bar. It is important to use caching. Don't mix with autofill. Default:false
* Selectfirst (Boolean):
If set to True, the first value of the AutoComplete drop-down list is automatically selected when the user types the tab or return key, although it is not manually selected (with the keyboard or mouse). Of course, if a user selects an item, the user selects the value. Default:true
* Cachelength (number):
The length of the cache. That is, how many records to cache for a result set fetched from the database. Set to 1 is not cached. default:10
* Matchsubset (Boolean):
AutoComplete can you use caching for server queries, and if you cache query results for Foo, you don't need to retrieve them if you enter Foo? Use caching directly. This option is usually turned on to reduce the burden on the server to improve performance. will only be valid if the cache length is greater than 1 o'clock. Default:true
* MatchCase (Boolean):
Compare whether the case sensitive switch is turned on. It is important to use caching. If you understand an option, this is not difficult to understand, just like foot to the cache of Foo. Default:false
* Multiple (Boolean):
Whether to allow multiple values to be entered is to use AutoComplete multiple times to enter multiple values. default:false
* Multipleseparator (String):
When multiple selections are used, separate the characters from each selection. Default: ","
* Scroll (Boolean):
Whether the scroll display is used when the result set is greater than the default height default:true
* ScrollHeight (number):
The scroll height of the auto completion prompt is expressed in pixel size default:180
* Formatitem (Function):
Use advanced labels for each item that you want to display. This function is called for each row in the result, and the return value is displayed in the Drop-down list with the LI element. AutoComplete will provide three arguments (row, I, max): The returned array of results, row: The number of rows currently processed ( The first few items, which are the natural numbers starting from 1, Max: The number of elements in the current result array is the total number of items. Default:none, which means that no custom handler function is specified, so that each row in the Drop-down list contains only one value.
* FormatResult (Function):
Similar to Formatitem, but you can format the values that you want to enter into the input text box. There are also three parameters, like Formatitem. Default:none, which means either only data, or values supplied with Formatitem.
* Formatmatch (Function):
Use this function for each row of data to format the data that you want to query. The return value is used for the internal search algorithm. Parameter Value row
* Extraparams (Object):
Provides additional parameters for the background (typically the server-side script). As is often the case, a key value pair object is used. If the pass value is {Bar:4}, it will be autocompleter parsed into My_autocomplete_backend.aspx?q=foo &bar=4 (assuming the current user has entered Foo). Default: {}
* Result (Handler) Returns:jquery
This event is triggered when a user selects an item, and the parameter is:
Event: Events object. Event.type is result.
Value returned by the Formatted:formatresult function
$ ("#singleBirdRemote"). Result (function (Event,data, formatted) {
Assign values to other controls, trigger other events, etc.
});
"Attention Issues":
When using a remote address, it defaults to the arguments passed in: Q (input value), limit (returns the maximum value of the result), and can be passed into other parameters using Extraparams.
--------------------------------------------------------------------------------------------------
The author of the combined front and back code case:
The background Java code is as follows:
@RequestMapping (value = "Queryautojson.do")
@ResponseBody
public void Queryjquerypluginjson (Httpservletrequestrequest, httpservletresponse response) throws IOException {
String jsondata =request.getsession (). Getservletcontext (). getattribute ("Autojson"). ToString ();
Response.setcontenttype ("Text/plain; Charset=utf-8 ");
Response.setcharacterencoding ("UTF-8");
Response.setheader ("Pragma", "No-cache");
Response.setheader ("Cache-control", "No-cache");
Response.setdateheader ("Expires", 0);
Response.getwriter (). println (Jsondata);
}
The foreground code is as follows:
JQuery (document). Ready (function () {
$.getjson ("Mytest/manage/queryautojson.do", function (data) {
$ (' #keyword '). AutoComplete (data, {
Number of entries in Max:8,//List
minchars:0,//automatic completion of the minimum characters filled before activation
width:153,//hint width, overflow hidden
SCROLLHEIGHT:200,//Tip height, overflow display scroll bar
Matchcase:false,//IS case sensitive
Matchcontains:false,//contains a match, is the data in the parameters, whether as long as the data contained in the text box is displayed
Autofill:false,//Auto Fill
Formatitem:function (row, I, max) {
Return row. Unit;
},
Formatmatch:function (row, I, max) {
Return row. Unit;
},
Formatresult:function (Row) {
return row.id;
}
). Result (function (event, row, formatted) {
$ ("#content"). Val (Row.name);
});
});
});
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
