JSP + ajax實現輸入框自動補全功能執行個體代碼

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

下面是我用ajax實現的輸入框自動補全功能，資料庫資料很少，大體模仿出了百度首頁的提示功能，當然，人家百度的東西不只是這麼簡單的！先看運行效果：

index.jsp（包含主要的js代碼）

複製代碼代碼如下:<%@ 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">

<head>

function mSift_SeekTp(oObj, nDire) {

var nPosition = null;

if (oObj.getBoundingClientRect && !document.all) {

var oDc = document.documentElement;

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.cssText = '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('li');

if (oLi.length > 0) {

oLi[_this.SelIndex].style.cssText = 'background:#36c;padding:0 5px;line-height:20px;cursor:default;color:#fff;';

}

ChangeOn : function(oObj) {

var oLi = this.TgList.getElementsByTagName('li');

for ( var i = 0; i < oLi.length; i++) {

oLi[i].style.cssText = 'padding:0 5px;line-height:20px;cursor:default;';

}

oObj.style.cssText = '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>

//建立執行個體，第一個參數是執行個體對象的名稱，第二個是最多顯示的數量

var oo = new mSift('oo', 20);

//擷取資料

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();

}

//指定文字框對象建立特效

oo.Create(document.getElementById('abc'));

</script>

</body>

</html>

AjaxServlet.java

複製代碼代碼如下: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);

}

以上就是主要代碼，資料庫查詢後返回的是以"|"分割串連的字串組合（PS:圖省勁嘛）。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More