The following is the full function of Automatic Filling of input boxes implemented by ajax. The database data is very small and the prompt function of Baidu homepage is largely imitated. Of course, Baidu's stuff is not just that simple! First look at the running effect:
Index. jsp (including main js Code)
Copy codeThe Code is as follows: <% @ page language = "java" import = "java. util. *" pageEncoding = "UTF-8" %><%
String path = request. getContextPath ();
String basePath = request. getScheme () + "://"
+ Request. getServerName () + ":" + request. getServerPort ()
+ Path + "/";
%>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Search </title>
<Script type = "text/javascript">
Function mSift_SeekTp (oObj, nDire ){
Var nPosition = null;
If (oObj. getBoundingClientRect &&! Document. all ){
Var oDc = document.doc umentElement;
Switch (nDire ){
Case 0:
Return oObj. getBoundingClientRect (). top + oDc. scrollTop;
Case 1:
Return oObj. getBoundingClientRect (). right + oDc. scrollLeft;
Case 2:
Return oObj. getBoundingClientRect (). bottom + oDc. scrollTop;
Case 3:
Return oObj. getBoundingClientRect (). left + oDc. scrollLeft;
}
} Else {
If (nDire = 1 | nDire = 3 ){
NPosition = oObj. offsetLeft;
} Else {
NPosition = oObj. offsetTop;
}
If (arguments [arguments. length-1]! = 0 ){
If (nDire = 1 ){
NPosition + = oObj. offsetWidth;
} Else if (nDire = 2 ){
NPosition + = oObj. offsetHeight;
}
}
If (oObj. offsetParent! = Null ){
NPosition + = mSift_SeekTp (oObj. offsetParent, nDire, 0 );
}
Return nPosition;
}
}
Function mSift (cVarName, nMax ){
This. oo = cVarName;
This. Max = nMax;
}
MSift. prototype = {
Varsion: 'v2010. 10.29 by AngusYoung | mrxcool.com ',
Target: Object,
TgList: Object,
Listeners: null,
SelIndex: 0,
Data: [],
ReData: [],
Create: function (oObj ){
Var _ this = this;
Var oUL = document. createElement ('ul ');
OUL. style. display = 'none ';
OObj. parentNode. insertBefore (oUL, oObj );
_ This. TgList = oUL;
OObj. onkeydown = oObj. onclick = function (e ){
_ This. Listen (this, e );
};
OObj. onblur = function (){
SetTimeout (function (){
_ This. Clear ();
},100 );
};
},
Complete: function (){
},
Select: function (){
Var _ this = this;
If (_ this. ReData. length> 0 ){
_ This. Target. value = _ this. ReData [_ this. SelIndex]. replace (
/\ */G, '*'). replace (/\ |/g, '| ');
_ This. Clear ();
}
SetTimeout (function (){
_ This. Target. focus ();
}, 10 );
_ This. Complete ();
},
Listen: function (oObj ){
Var _ this = this;
_ This. Target = oObj;
Var e = arguments [arguments. length-1];
Var ev = window. event | e;
Switch (ev. keyCode ){
Case 9: // TAB
Return;
Case 13: // ENTER
_ This. Target. blur ();
_ This. Select ();
Return;
Case 38: // UP
_ This. SelIndex = _ this. SelIndex> 0? _ This. SelIndex-1
: _ This. ReData. length-1;
Break;
Case 40: // DOWN
_ This. SelIndex = _ this. SelIndex <_ this. ReData. length-1? _ This. SelIndex + 1
: 0;
Break;
Default:
_ This. SelIndex = 0;
}
If (_ this. Listeners ){
ClearInterval (_ this. Listeners );
}
_ This. Listeners = setInterval (function (){
_ This. Get ();
}, 10 );
},
Get: function (){
Var _ this = this;
If (_ this. Target. value = ''){
_ This. Clear ();
Return;
}
If (_ this. Listeners ){
ClearInterval (_ this. Listeners );
}
;
_ This. ReData = [];
Var cResult = '';
For (var I = 0; I <_ this. Data. length; I ++ ){
If (_ this. Data [I]. toLowerCase (). indexOf (
_ This. Target. value. toLowerCase ()> = 0 ){
_ This. ReData. push (_ this. Data [I]);
If (_ this. ReData. length = _ this. Max ){
Break;
}
}
}
Var cRegPattern = _ this. Target. value. replace (/\ */g ,'*');
CRegPattern = cRegPattern. replace (// |/g, '| ');
CRegPattern = cRegPattern. replace (/\ +/g, '\ + ');
CRegPattern = cRegPattern. replace (/\./g ,'\\.');
CRegPattern = cRegPattern. replace (/\? /G ,'\\? ');
CRegPattern = cRegPattern. replace (/\ ^/g, '\ ^ ');
CRegPattern = cRegPattern. replace (/\ $/g, '\ $ ');
CRegPattern = cRegPattern. replace (/\ (/g ,'\\(');
CRegPattern = cRegPattern. replace (/\)/g ,'\\)');
CRegPattern = cRegPattern. replace (/\ [/g ,'\\[');
CRegPattern = cRegPattern. replace (/\]/g, '\]');
CRegPattern = cRegPattern. replace (// \/g ,'\\\\');
Var cRegEx = new RegExp (cRegPattern, 'I ');
For (var I = 0; I <_ this. ReData. length; I ++ ){
If (_ this. Target. value. indexOf ('*')> = 0 ){
_ This. ReData [I] = _ this. ReData [I]. replace (/\ */g ,'*');
}
If (_ this. Target. value. indexOf ('|')> = 0 ){
_ This. ReData [I] = _ this. ReData [I]. replace (/\ |/g, '| ');
}
CResult + = '<li style = "padding: 0 5px; line-height: 20px; cursor: default;" onmouseover = "'
+ _ This. oo
+ '. ChangeOn (this );'
+ _ This. oo
+ '. SelIndex ='
+ I
+ '; "Onmousedown = "'
+ _ This. oo
+ '. Select (); ">'
+ _ This. ReData [I]
. Replace (
CRegEx,
Function (s ){
Return '<span style = "background: # ff9; font-weight: bold; font-style: normal; color: # e60;">'
+ S + '</span> ';
});
+ '</Li> ';
}
If (cResult = ''){
_ This. Clear ();
} Else {
_ This. TgList. innerHTML = cResult;
_This.TgList.style.css Text = 'display: block; position: absolute; background: # fff; border: #090 solid 1px; margin:-1px 0 0; padding: 5px; list-style: none; font-size: 12px ;';
_ This. TgList. style. top = mSift_SeekTp (_ this. Target, 2) + 'px ';
_ This. TgList. style. left = mSift_SeekTp (_ this. Target, 3) + 'px ';
_ This. TgList. style. width = _ this. Target. offsetWidth-12 + 'px ';
}
Var oLi = _ this. TgList. getElementsByTagName ('lil ');
If (oLi. length> 0 ){
Oliyun_this.selindex.html .style.css Text = 'background: # 36c; padding: 0 5px; line-height: 20px; cursor: default; color: # fff ;';
}
},
ChangeOn: function (oObj ){
Var oLi = this. TgList. getElementsByTagName ('lil ');
For (var I = 0; I <oLi. length; I ++ ){
Oliyuniapps.style.css Text = 'padding: 0 5px; line-height: 20px; cursor: default ;';
}
OObj.style.css Text = 'background: # 36c; padding: 0 5px; line-height: 20px; cursor: default; color: # fff ;';
},
Clear: function (){
Var _ this = this;
If (_ this. TgList ){
_ This. TgList. style. display = 'none ';
_ This. ReData = [];
_ This. SelIndex = 0;
}
}
}
</Script>
</Head>
<Body>
<Form name = "salefrm" method = "post" action = "result. jsp">
<Input type = "text" onfocus = "loadXMLDoc (this. value)" name = "name" id = "abc" size = "40"/>
<Input type = "submit" value = "Search"/>
</Form>
<Script type = "text/javascript">
// Create an instance. The first parameter is the Instance Object Name, and the second parameter is the maximum number of displayed instances.
Var oo = new mSift ('oo ', 20 );
// Obtain data
Function loadXMLDoc (str ){
Var xmlhttp;
If (window. XMLHttpRequest) {// code for IE7 +, Firefox, Chrome, Opera, Safari
Xmlhttp = new XMLHttpRequest ();
} Else {// code for IE6, IE5
Xmlhttp = new ActiveXObject ("Microsoft. XMLHTTP ");
}
Xmlhttp. onreadystatechange = function (){
If (xmlhttp. readyState = 4 & xmlhttp. status = 200 ){
Oo. Data = xmlhttp. responseText. split ("| ");
}
};
Xmlhttp. open ("GET", "AjaxServlet? Name = "+ str, true );
Xmlhttp. send ();
}
// Specify the text box object to create a special effect
Oo. Create (document. getElementById ('abc '));
</Script>
</Body>
</Html>
AjaxServlet. java
Copy codeThe Code is as follows: public void doGet (HttpServletRequest request, HttpServletResponse response)Throws ServletException, IOException {
Response. setContentType ("text/xml; charset = UTF-8 ");
PrintWriter out = response. getWriter ();
String str = newsDao. findAllNewsType ();
Out. println (str );
}
The above is the main code. After the database query is returned, it is a string combination of "|" separated connections (PS: Graph effort-saving ).
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
