Jquery AutoComplete Example Detailed description

Note that this is the same as the previous $ ("#txt"). AutoComplete separately written, written in the top of the binding method of the bottom of the good.
$ ("#txt"). Result (function (event, data, formatted) {
});

$ ("#txt"). AutoComplete ("/asmx/executeplan.ashx", {
Extraparams:{hosid:hosid,profid:profid},
minchars:0,
max:700,
Mustmatch:true,
Autofill:true,
Selectfirst:true,
scrollheight:220,
width:640,
Scroll:true,
Parse:function (data) {
var obj=eval ("(" +data+ ")");
var row = [];
for (var i = 0; i<obj.length; i++) {
Row[i] = {Data:obj[i],//json
Value:obj[i].instname,//value in list
Result:obj[i].instname}; Displayed in the Drop-down list.
}
if (obj.length = 1)
{
$ ("#hfinstid"). Val (Obj[0].executeid);
$ ("#button1"). Click ();
}
return row;
} ,
Formatitem:function (row, I, total) {
},
Formatmatch:function (row, I, max) {
},
Formatresult:function (row, I, max) {
}
});

See a detailed description

jquery version required: 1.2.6

Second, the use

<script src= "./jquery-1.3.2.js" type= "text/Web Effects" ></script>

<script src= "./jquery.autocomplete.js" type= "Text/javascript" ></script>

<link rel= "stylesheet" href= "./jquery.autocomplete.css Tutorial"/>

AutoComplete (URL or data, options) returns:jquery

Allow an input or textarea to have AutoComplete function

Example

JS Code

var data = "Core selectors attributes traversing manipulation CSS events effects ajax utilities". Split ("");

$ ("#example"). AutoComplete (data);

The above example is to add AutoComplete for ID example

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

];

The emails array format, Formatitem represents the displayed format, Formatmatch represents the matching content, formatresult the content that represents the result

$ ("#suggest13"). AutoComplete (Emails, {

minchars:0,

width:310,

Matchcontains:true,

Autofill:false,

Formatitem:function (row, I, max) {

return i + "/" + Max + ":" "+ Row.name +" "[" + row.to +] ";

},

Formatmatch:function (row, I, max) {

return row.name + "" + row.to;

},

Formatresult:function (Row) {

return row.to;

}

});

See a detailed example of jquery

<div class= "Search_item_content" >
<b> Products Search </b>
<input type= "text" id= "Quick_search" name= "Q" value= ""/>
<input type= "Submit" value= "search" class= "btn"/>
</div>

JS Code

jquery (document). Ready (function () {
jquery ("#quick_search"). AutoComplete (
"$! {request.contextpath}/autocomplete.shtml ",
{
Max:10,
Scroll:false,
width:162
}
);
})

Java code

public class Autocompleteaction extends action {
Public Actionforward Execute (actionmapping mapping, Actionform form,
HTTPS Tutorials Ervletrequest request, httpservletresponse response)
Throws Exception {
Searchsuggestionmanager service = (Searchsuggestionmanager) webapputil
. GetService ("Searchsuggestionservice", request);
string keyword = request.getparameter ("q");
Keyword=escapeunescape.unescape (keyword);
list<searchsuggestion> results = Service
. Getsearchsuggestionsbykeyword (keyword);

try {
Response.setcontenttype ("text/html; CHARSET=GBK ");
PrintWriter out = Response.getwriter ();
Jsonarray Jsonarray = jsonarray.fromobject (results);
Out.print (Jsonarray.tostring ());
Out.flush ();
Out.close ();
return null;
catch (Exception e) {
E.printstacktrace ();
return null;
}

}
}