正文
JavaScript 输入自动完成插件
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
作为web开发的一员，应该都不陌生，信息处理时，很多时候需要根据用户的输入实时反馈查询结果供其选择，这给了用户很好的人机交互体验，在各大门户网站上已经被使用的很成熟了，最近项目中用到此功能，网上有很多插件和样例，但用起来发现都多多少少与项目的需求有所出入，故自己写了一个，分享一下，希望能给你带来帮助，插件效果图如下：
原理
这个插件主要用来方便用户在信息查询和处理时快捷、简单，其原理分析下：
1. 信息处理需要前台和后台，前台有一个或者多个查询输入框（目前暂定为input标签）。
2. 用户在这些输入框中输入查询关键字时，系统根据用户实时的输入给页面后台发送数据查询请求。
3. 后台程序查询数据并排序，将最符合用户查询的记录（暂定为前10条）回传给前台插件。
4. 插件内部根据这些查询结果友好的展现出来给用户，用户选择展现出来的结果中某一条，该条记录关键字会自动补齐用户的输入。
功能
为了完成上述过程，这个插件需要帮用户做到以下一系列功能：
1. 能够根据标签id绑定一个或者多个输入标签，各标签的查询自定完成过程相互独立，互不影响。
2. 用户没有输入或者输入为空格等特殊字符时，不进行查询，以减少服务器的负担。
3. 根据用户的输入，实时展现查询结果，每次展现最符合的前10条记录，用菜单的方式，每条记录一行，结果列表浮动与输入标签的下方，宽度和标签宽度一致。
4. 浮动的查询结果可以用鼠标选择，也可以用键盘中的上下移动键进行选择，选择完毕后该条记录中的关键字将自动补齐输入框内容；鼠标移动上去后选中项的颜色要发生变化，上下键选择时可以循环列表，并保留用户输入的值。
5. 光标移入输入框时进行查询，查询结果浮动层和输入标签失去焦点时浮动层影藏。
实现
首先插件根据需要可以绑定一个或者多个页面输入标签，插件只需获取标签的id即可，绑定多个输入标签时重复该过程，并需要对标签进行编号，以便插件动态生成浮动结果列表时标记id。其次根据开发时不同的需求，插件中实时的结果查询支持两种方式：一种是通过请求中间页面获取，二是通过ajax获取。两种方式的实现要求插件暴露出来的接口将不一样：
1）通过请求中间页面获取：插件需要一个请求中间页的地址（URL），是否对鼠标选择添加处理事件的标记（true&false），是否对按键选择添加处理事件的标记（true&false），如果需要前两个标记有一个为true，则插件还需要一个处理事件的方法入口（ReturnAutoComplete）。
2）通过ajax获取：插件需要一个获取查询结果的ajax方法入口（CallAjaxFuntion），是否对鼠标选择添加处理事件的标记（true&false），是否对按键选择添加处理事件的标记（true&false），如果需要前两个标记有一个为true，则插件还需要一个处理事件的方法入口（ReturnAutoComplete）。
接下来，根据实现原理编写插件：
一、绑定标签
插件根据id绑定前台页面输入标签，一个或者多个，代码如下：
/*
* 自动完成功能主函数(闭包)
*
* id:自动完成功能需要绑定的控件
*
* 版本：1.0
*/
function autoComplete(id) {
/****预留退路处理部分**begin**/
if (!document.getElementById) return false;
if (!document.createElement) return false;
if (!document.getElementsByTagName) return false;
/****预留退路处理部分**end**/ var me = this; //获取当前对象 /****变量初始化部分**begin**/
me.AutoCompleteControlID; //自动完成绑定控件客户端ID
me.handle = null; //自动完成绑定控件的对象
me.DivResult; //查询结果弹出层对象
me.currentIndex = -1; //当前选中的结果索引
me.LastIndex = -1; //上一条选中的结果索引
me.requestObj; //向服务器发送请求的对象
me.TableIndex = 0; //标记搜索结果的table的id，避免在同一个页面上出现两个相同id的table
me.OrgValue = ""; //记录用户当前输入的值
me.KeyType = true; //标记是上移（true）还是下移（false）
me.FocusInDiv = false; //标记当前焦点是否是搜索结果div
me.AllowEnterKeyFlag = false; //标记是否允许回车键接收事件
me.AllowClickFlag = false; //标记是否允许鼠标点击选择事件
me.AllowAutoComplete = true; //标记是否还需要继续实现自动完成功能（在用户传递参数有误的情况下使用，避免报错）
me.Requesttype = 1; //调用方式，使用请求页（1）\ajax函数（2）
me.RequestPageUrl = null; //请求页调用时的页面地址（包括参数）
me.ajaxCallBackFun = null; //ajax函数调用时的回调函数
me.AllowCallBackFun = null; //用户传递过来的接收回车或者鼠标点击事件的回调函数
//判断绑定控件的ID并赋值
if (id != null && typeof (id) != undefined) {
me.AutoCompleteControlID = id;
me.handle = document.getElementById(me.AutoCompleteControlID);
} if (me.DivResult == null || typeof (me.DivResult) == "undefined") {
me.DivResult = document.createElement("div");
var parent = document.getElementById(me.AutoCompleteControlID).parentElement;
if (typeof (parent) != "undefined") {
parent.appendChild(me.DivResult);
}
}
/****变量初始化部分**end**/ }
二、初始化插件
选择插件的数据查询方式及各方式所需的参数，代码如下：
/*
* 初始化函数，负责初始化部分可选成员变量
* requestType:调用方式（1为请求页，2为ajax函数）
* pageUrl：如果是请求页的方式调用，则此参数必不能为空，若为ajax函数调用，则此参数为null
* ajaxCallBackFun：如果是ajax函数的方式调用，则此参数必不能为空，若为请求页方式调用，则此参数为null
* enterKeyFlag：标记是否允许回车事件
* mouseClickFlag：标记是否允许鼠标选择事件
* callBackFun：回调函数，与前两个参数配合使用，如果前两个参数有一个设置为true，则此处必须实现回调函数，否则为null
* tabIndex:绑定控件的编号，标记搜索结果table的id，以避免同页面的两个绑定控件的搜索结果id相同
*/
this.Init = function(requestType, pageUrl, ajaxCallBackFun, enterKeyFlag, mouseClickFlag, callBackFun, tabIndex) {
//初始化变量
me.Requesttype = requestType;
me.RequestPageUrl = pageUrl;
me.ajaxCallBackFun = ajaxCallBackFun;
me.AllowEnterKeyFlag = enterKeyFlag;
me.AllowClickFlag = mouseClickFlag;
me.TableIndex = tabIndex;
//判断请求方式
if (me.Requesttype == 1) {
me.ajaxCallBackFun = null;
if (me.RequestPageUrl == null) {
alert("传递的参数有误，请求页的地址不能为null！");
me.AllowAutoComplete = false;
}
}
else if (me.Requesttype == 2) {
me.RequestPageUrl = null;
if (me.ajaxCallBackFun == null) {
alert("传递的参数有误，ajax回调函数不能为null！");
me.AllowAutoComplete = false;
}
}
//判断标志位
if (!me.AllowEnterKeyFlag && !me.AllowClickFlag) {
callBackFun = null;
}
else {
if (callBackFun == null) {
alert("传递的参数有误，回调函数不能为null！");
me.AllowAutoComplete = false;
}
else {
me.AllowCallBackFun = callBackFun;
}
}
}
三、数据查询处理
根据初始化好的数据查询方式给后台发送数据查询请求，后台查询到数据后回馈给插件，这个过程的触发点是用户在输入标签中输入了查询关键字，实现该标签的键盘提起事件，代码如下：
//绑定控件的键盘弹起事件
document.getElementById(me.AutoCompleteControlID).onkeyup = function(evt) {
if (me.AllowAutoComplete) {
try {
evt = evt || window.event;
if (evt.keyCode != 40 && evt.keyCode != 38 && evt.keyCode != 39 && evt.keyCode != 37) {
me.OrgValue = me.handle.value;
}
else {//向下\向上
if (evt.keyCode == 38) me.KeyType = true;
else if (evt.keyCode == 40) me.KeyType = false;
}
me.Auto();
} catch (e) { }
}
}
通过实现Auto事件实现数据查询，代码如下：
this.Auto = function() {
var evt = evt || window.event;
//如果按下 向上, 向下 或 回车
if (evt.keyCode == 38 || evt.keyCode == 40 || evt.keyCode == 13) {
me.SelectItem();
}
//左右移动键
else if (evt.keyCode == 39 || evt.keyCode == 37) {
return;
}
else {
//恢复下拉选择项为 -1
currentIndex = -1;
//设置结果弹出层的样式
me.DivResult.style.position = "absolute";
me.DivResult.style.top = me.handle.getBoundingClientRect().top + 19;
me.DivResult.style.left = me.handle.getBoundingClientRect().left - 2;
me.DivResult.style.width = me.handle.offsetWidth;
me.DivResult.style.height = 20;
me.DivResult.style.backgroundColor = "#ffffff";
if (me.Requesttype == 1) {//页面请求
if (window.XMLHttpRequest) {
me.requestObj = new XMLHttpRequest();
if (me.requestObj.overrideMimeType)
me.requestObj.overrideMimeType("text/xml");
}
else if (window.ActiveXObject) {
try {
me.requestObj = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
me.requestObj = new ActiveXObject("Microsoft.XMLHTTP");
}
}
if (me.requestObj == null)
return;
me.requestObj.onreadystatechange = me.ShowResult;
var strUrl = me.RequestPageUrl + "?InputValue=" + escape(me.handle.value) + "&TableIndex=" + me.TableIndex;
me.requestObj.open("GET", strUrl, true);
me.requestObj.send();
}
else {//ajax函数请求
try {
me.ajaxCallBackFun(me.handle.value, me.TableIndex, me.AjaxCallBack);
} catch (e) { }
}
}
}
Auto函数实现了数据查询这一过程，根据查询方式的不同，数据请求的方法也不同：
1.如果是页面请求 ：插件根据初始化时提供的页面url内部进行ajax访问，并将响应的结果用方法me.ShowResult处理，该方法实现如下：
//搜索结果处理函数(页面请求调用时)
this.ShowResult = function() {
if (me.requestObj.readyState == 4) {
if (me.requestObj.status == 200)//ok
{
me.DivResult.innerHTML = me.AlynasisContent(me.requestObj.responseText);
//判断是否有搜索结果
var result = me.DivResult.getElementsByTagName("td");
if (result.length > 0) {
me.DivResult.style.height = result.length * 15;
me.DivResult.style.display = "";
//给每个Td动态绑定事件(新建了一个闭包，用来传递参数，否则所有元素的一下三个鼠标事件的参数i会是相同的值)
for (var i = 0; i < result.length; i++) {
var bb = new BiBaoOnMouseResult(i, me);
result[i].onmouseover = bb.OnMouseOverEx;
result[i].onmouseout = bb.OnMouseOutEx;
result[i].onclick = bb.OnMouseClickEx;
}
}
else {
me.DivResult.style.display = "none";
return;
}
me.requestObj = null; //销毁对象
}
else if (me.requestObj.status == 404) {
//alert("请求的页面未找到！");
me.DivResult.style.display = "none";
me.requestObj = null; //销毁对象
return;
}
}
}
2.ajax函数请求 ：插件直接调用初始化时提供的外部ajax函数，并将结果处理函数me.AjaxCallBack作为最后一个参数传递到该ajax函数中，以便在数据查询完成时调用，该方法实现如下：
//搜索结果处理函数(ajax函数请求方式)
this.AjaxCallBack = function(response) {
if (response.error != null) {
return;
}
me.DivResult.innerHTML = me.AlynasisContent(response.value);
//判断是否有搜索结果
var result = me.DivResult.getElementsByTagName("td");
if (result.length > 0) {
me.DivResult.style.height = result.length * 15;
me.DivResult.style.display = "";
//给每个Td动态绑定事件(新建了一个闭包，用来传递参数，否则所有元素的一下三个鼠标事件的参数i会是相同的值)
for (var i = 0; i < result.length; i++) {
var bb = new BiBaoOnMouseResult(i, me);
result[i].onmouseover = bb.OnMouseOverEx;
result[i].onmouseout = bb.OnMouseOutEx;
result[i].onclick = bb.OnMouseClickEx;
}
}
else {
me.DivResult.style.display = "none";
return;
}
}
四、查询结果展现
上述两种数据查询代码中，都通过方法me.AlynasisContent来对查询结果进行解析，该函数用表格的方式展现该查询结果，每条一行，代码如下：
//解析搜索返回的结果
this.AlynasisContent = function(strObj) {
if (strObj == null || strObj == "") {
return "";
} var itemList = strObj.split("@|@");
var strResult = "<table cellSpacing='0' cellPadding='0' align='center' border='0' id='Tmp_AutoComplete_tblResult_" + me.TableIndex + "' style='padding-left:5;padding-right:5; background-color:#FFFFFF;border:1px solid #999999;text-align:left;width:100%;'>";
for (var i = 0; i < itemList.length; i++) {
strResult += "<tr ReturnValue=" + itemList[i] + "><td height='15' nowrap><div style='width:" + (me.handle.offsetWidth - 12) + ";overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>" + itemList[i] + "<div></td></tr>";
}
strResult += "</table>";
return strResult;
}
至此，插件的流程全部完成，但还有很多细节功能，比如鼠标选择、键盘上下键选择、给查询结果中每条记录添加鼠标和键盘事件并响应等，全部代码将在后面给出，下面以.net开发为例来演示此插件的调用方法：
【用法1】请求aspx页面（“AutoComplete.aspx”），必须要实现页面，如果选择了接收回车键和鼠标选择事件，则必须要实现ReturnAutoComplete()函数。
var auto1 = new autoComplete("txt");
auto1.Init(1, "AutoComplete.aspx", null, true, false, ReturnAutoComplete, 1);
【用法2】ajax方法请求，必须要实现CallAjaxFuntion函数，如果选择了接收回车键和鼠标选择事件，则必须要实现ReturnAutoComplete()函数，下面ajax请求是通过ajaxpro来实现的，当然，可以根据需要可以使用其他ajax方式调用。
var auto2 = new autoComplete("text");
auto2.Init(2, null, CallAjaxFuntion, false, true, ReturnAutoComplete, 1);
function CallAjaxFuntion(strTxtValue, resultTableIndex, ajaxCallBack) {
_Default.GetDataSource(strTxtValue, resultTableIndex, ajaxCallBack);
}
ReturnAutoComplete方法实现如下：
//接收回车或鼠标点击事件(returnValue:为选中的textbox的值)
function ReturnAutoComplete(returnValue) {
alert(returnValue);
//do something else
}
最后，插件源码如下（下载文件请点击Download）：
/*
* 自动完成功能主函数(闭包)
*
* id:自动完成功能需要绑定的控件
*
* 版本：1.0
*/
function autoComplete(id) {
/****预留退路处理部分**begin**/
if (!document.getElementById) return false;
if (!document.createElement) return false;
if (!document.getElementsByTagName) return false;
/****预留退路处理部分**end**/ var me = this; //获取当前对象 /****变量初始化部分**begin**/
me.AutoCompleteControlID; //自动完成绑定控件客户端ID
me.handle = null; //自动完成绑定控件的对象
me.DivResult; //查询结果弹出层对象
me.currentIndex = -1; //当前选中的结果索引
me.LastIndex = -1; //上一条选中的结果索引
me.requestObj; //向服务器发送请求的对象
me.TableIndex = 0; //标记搜索结果的table的id，避免在同一个页面上出现两个相同id的table
me.OrgValue = ""; //记录用户当前输入的值
me.KeyType = true; //标记是上移（true）还是下移（false）
me.FocusInDiv = false; //标记当前焦点是否是搜索结果div
me.AllowEnterKeyFlag = false; //标记是否允许回车键接收事件
me.AllowClickFlag = false; //标记是否允许鼠标点击选择事件
me.AllowAutoComplete = true; //标记是否还需要继续实现自动完成功能（在用户传递参数有误的情况下使用，避免报错）
me.Requesttype = 1; //调用方式，使用请求页（1）\ajax函数（2）
me.RequestPageUrl = null; //请求页调用时的页面地址（包括参数）
me.ajaxCallBackFun = null; //ajax函数调用时的回调函数
me.AllowCallBackFun = null; //用户传递过来的接收回车或者鼠标点击事件的回调函数
//判断绑定控件的ID并赋值
if (id != null && typeof (id) != undefined) {
me.AutoCompleteControlID = id;
me.handle = document.getElementById(me.AutoCompleteControlID);
} if (me.DivResult == null || typeof (me.DivResult) == "undefined") {
me.DivResult = document.createElement("div");
var parent = document.getElementById(me.AutoCompleteControlID).parentElement;
if (typeof (parent) != "undefined") {
parent.appendChild(me.DivResult);
}
}
/****变量初始化部分**end**/ /*
* 初始化函数，负责初始化部分可选成员变量
* requestType:调用方式（1为请求页，2为ajax函数）
* pageUrl：如果是请求页的方式调用，则此参数必不能为空，若为ajax函数调用，则此参数为null
* ajaxCallBackFun：如果是ajax函数的方式调用，则此参数必不能为空，若为请求页方式调用，则此参数为null
* enterKeyFlag：标记是否允许回车事件
* mouseClickFlag：标记是否允许鼠标选择事件
* callBackFun：回调函数，与前两个参数配合使用，如果前两个参数有一个设置为true，则此处必须实现回调函数，否则为null
* tabIndex:绑定控件的编号，标记搜索结果table的id，以避免同页面的两个绑定控件的搜索结果id相同
*/
this.Init = function(requestType, pageUrl, ajaxCallBackFun, enterKeyFlag, mouseClickFlag, callBackFun, tabIndex) {
//初始化变量
me.Requesttype = requestType;
me.RequestPageUrl = pageUrl;
me.ajaxCallBackFun = ajaxCallBackFun;
me.AllowEnterKeyFlag = enterKeyFlag;
me.AllowClickFlag = mouseClickFlag;
me.TableIndex = tabIndex;
//判断请求方式
if (me.Requesttype == 1) {
me.ajaxCallBackFun = null;
if (me.RequestPageUrl == null) {
alert("传递的参数有误，请求页的地址不能为null！");
me.AllowAutoComplete = false;
}
}
else if (me.Requesttype == 2) {
me.RequestPageUrl = null;
if (me.ajaxCallBackFun == null) {
alert("传递的参数有误，ajax回调函数不能为null！");
me.AllowAutoComplete = false;
}
}
//判断标志位
if (!me.AllowEnterKeyFlag && !me.AllowClickFlag) {
callBackFun = null;
}
else {
if (callBackFun == null) {
alert("传递的参数有误，回调函数不能为null！");
me.AllowAutoComplete = false;
}
else {
me.AllowCallBackFun = callBackFun;
}
}
} this.Auto = function() {
var evt = evt || window.event;
//如果按下 向上, 向下 或 回车
if (evt.keyCode == 38 || evt.keyCode == 40 || evt.keyCode == 13) {
me.SelectItem();
}
//左右移动键
else if (evt.keyCode == 39 || evt.keyCode == 37) {
return;
}
else {
//恢复下拉选择项为 -1
currentIndex = -1;
//设置结果弹出层的样式
me.DivResult.style.position = "absolute";
me.DivResult.style.top = me.handle.getBoundingClientRect().top + 19;
me.DivResult.style.left = me.handle.getBoundingClientRect().left - 2;
me.DivResult.style.width = me.handle.offsetWidth;
me.DivResult.style.height = 20;
me.DivResult.style.backgroundColor = "#ffffff"; if (me.Requesttype == 1) {//页面请求 if (window.XMLHttpRequest) {
me.requestObj = new XMLHttpRequest();
if (me.requestObj.overrideMimeType)
me.requestObj.overrideMimeType("text/xml");
}
else if (window.ActiveXObject) {
try {
me.requestObj = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
me.requestObj = new ActiveXObject("Microsoft.XMLHTTP");
}
}
if (me.requestObj == null)
return;
me.requestObj.onreadystatechange = me.ShowResult;
var strUrl = me.RequestPageUrl + "?InputValue=" + escape(me.handle.value) + "&TableIndex=" + me.TableIndex;
me.requestObj.open("GET", strUrl, true);
me.requestObj.send();
}
else {//ajax函数请求
try {
me.ajaxCallBackFun(me.handle.value, me.TableIndex, me.AjaxCallBack);
} catch (e) { }
}
}
}
//搜索结果处理函数(ajax函数请求方式)
this.AjaxCallBack = function(response) {
if (response.error != null) {
return;
}
me.DivResult.innerHTML = me.AlynasisContent(response.value);
//判断是否有搜索结果
var result = me.DivResult.getElementsByTagName("td");
if (result.length > 0) {
me.DivResult.style.height = result.length * 15;
me.DivResult.style.display = "";
//给每个Td动态绑定事件(新建了一个闭包，用来传递参数，否则所有元素的一下三个鼠标事件的参数i会是相同的值)
for (var i = 0; i < result.length; i++) {
var bb = new BiBaoOnMouseResult(i, me);
result[i].onmouseover = bb.OnMouseOverEx;
result[i].onmouseout = bb.OnMouseOutEx;
result[i].onclick = bb.OnMouseClickEx;
}
}
else {
me.DivResult.style.display = "none";
return;
}
}
//搜索结果处理函数(页面请求调用时)
this.ShowResult = function() {
if (me.requestObj.readyState == 4) {
if (me.requestObj.status == 200)//ok
{
me.DivResult.innerHTML = me.AlynasisContent(me.requestObj.responseText);
//判断是否有搜索结果
var result = me.DivResult.getElementsByTagName("td");
if (result.length > 0) {
me.DivResult.style.height = result.length * 15;
me.DivResult.style.display = "";
//给每个Td动态绑定事件(新建了一个闭包，用来传递参数，否则所有元素的一下三个鼠标事件的参数i会是相同的值)
for (var i = 0; i < result.length; i++) {
var bb = new BiBaoOnMouseResult(i, me);
result[i].onmouseover = bb.OnMouseOverEx;
result[i].onmouseout = bb.OnMouseOutEx;
result[i].onclick = bb.OnMouseClickEx;
}
}
else {
me.DivResult.style.display = "none";
return;
}
me.requestObj = null; //销毁对象
}
else if (me.requestObj.status == 404) {
//alert("请求的页面未找到！");
me.DivResult.style.display = "none";
me.requestObj = null; //销毁对象
return;
}
}
}
//解析搜索返回的结果
this.AlynasisContent = function(strObj) {
if (strObj == null || strObj == "") {
return "";
} var itemList = strObj.split("@|@");
var strResult = "<table cellSpacing='0' cellPadding='0' align='center' border='0' id='Tmp_AutoComplete_tblResult_" + me.TableIndex + "' style='padding-left:5;padding-right:5; background-color:#FFFFFF;border:1px solid #999999;text-align:left;width:100%;'>";
for (var i = 0; i < itemList.length; i++) {
strResult += "<tr ReturnValue=" + itemList[i] + "><td height='15' nowrap><div style='width:" + (me.handle.offsetWidth - 12) + ";overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>" + itemList[i] + "<div></td></tr>";
}
strResult += "</table>";
return strResult;
}
//移动上下键选择搜索结果选项事件
this.SelectItem = function() {
//结果
var result = document.getElementById("Tmp_AutoComplete_tblResult_" + me.TableIndex);
if (!result)
return;
if (result.rows[me.LastIndex] != null) {
result.rows[me.LastIndex].style.backgroundColor = "#FFFFFF";
result.rows[me.LastIndex].style.color = "#000000";
}
var maxRow = result.rows.length;
//向上
if (event.keyCode == 38 && me.currentIndex >= 0) {
me.currentIndex--;
if (me.currentIndex == -1) {
me.handle.value = me.OrgValue;
}
else {
me.handle.value = result.rows[me.currentIndex].ReturnValue;
}
}
//向下
if (event.keyCode == 40 && me.currentIndex < maxRow) {
me.currentIndex++;
me.handle.value = result.rows[me.currentIndex].ReturnValue;
}
//回车
if (event.keyCode == 13) {
me.Select();
me.InitItem();
return false;
}
if (result.rows[me.currentIndex] != undefined) {
//选中颜色
result.rows[me.currentIndex].style.backgroundColor = "gray"; //"#3161CE";
result.rows[me.currentIndex].style.color = "#FFFFFF";
}
me.LastIndex = me.currentIndex; if (!me.KeyType) { if ((me.currentIndex + 1) >= maxRow) {//如果达到最大值，则循环(向下)
me.currentIndex++;
if (me.currentIndex == (maxRow + 1)) me.currentIndex = -1;
if (me.currentIndex == -1) {
me.handle.value = me.OrgValue;
}
}
}
else {
if (me.currentIndex == -1) me.currentIndex = maxRow; //如果达到最小值，则循环(向上)
}
} //回车选择事件
this.Select = function() {
var result = document.getElementById("Tmp_AutoComplete_tblResult_" + me.TableIndex);
if (!result || result.rows.length <= 0)
return;
//取出选中的值
var ReturnValue = "";
if (me.currentIndex < 0)//直接取输入框中的值
ReturnValue = me.handle.value;
else //取用户选中的值
ReturnValue = result.rows[me.currentIndex].ReturnValue;
//自动完成功能出口，向主程序发送值信息
if (ReturnValue != undefined) {
me.DivResult.style.display = "none";
//自动完成处理事件--由用户自己完成实现
if (me.AllowEnterKeyFlag)
me.AllowCallBackFun(ReturnValue);
}
} this.Hide = function() {
me.DivResult.style.display = "none";
me.currentIndex = -1;
}
this.InitItem = function() {
me.DivResult.style.display = "none";
me.DivResult.innerHTML = "";
me.currentIndex = -1;
}
//搜索结果的鼠标事件
this.OnTdMouseOver = function(i) {
if (me.AllowAutoComplete) {
me.currentIndex = i;
var result = document.getElementById("Tmp_AutoComplete_tblResult_" + me.TableIndex);
result.rows[me.currentIndex].style.cursor = "point";
if (!result || result.rows.length <= 0)
return;
//取消之前选中项的颜色
if (result.rows[me.LastIndex] != null) {
result.rows[me.LastIndex].style.backgroundColor = "#FFFFFF";
result.rows[me.LastIndex].style.color = "#000000";
}
//改变选中项的颜色
if (result.rows[me.currentIndex] != undefined) {
result.rows[me.currentIndex].style.backgroundColor = "gray"; //"#3161CE";
result.rows[me.currentIndex].style.color = "#FFFFFF";
}
me.LastIndex = me.currentIndex;
}
}
this.OnTdMouseOut = function(i) {
if (me.AllowAutoComplete) {
var result = document.getElementById("Tmp_AutoComplete_tblResult_" + me.TableIndex);
if (!result || result.rows.length <= 0)
return;
if (result.rows[me.currentIndex] != undefined) {
result.rows[me.currentIndex].style.backgroundColor = "#FFFFFF";
result.rows[me.currentIndex].style.color = "#000000";
}
}
}
this.OnTdMouseClick = function(i) {
if (me.AllowAutoComplete) {
var evt = fixEvent(window.event);
var result = document.getElementById("Tmp_AutoComplete_tblResult_" + me.TableIndex);
if (!result || result.rows.length <= 0)
return;
//给输入框赋值
var ReturnValue = result.rows[me.currentIndex].ReturnValue;
me.handle.value = ReturnValue;
//隐藏搜索结果
me.Hide();
//自动完成处理事件--由用户自己完成实现
if (me.AllowClickFlag)
me.AllowCallBackFun(ReturnValue);
}
}
//弹出层的鼠标移入/出事件
me.DivResult.onmouseout = function() {
if (me.AllowAutoComplete) {
me.currentIndex = -1;
me.FocusInDiv = false;
}
}
me.DivResult.onmouseover = function() {
if (me.AllowAutoComplete) {
me.FocusInDiv = true;
}
}
//绑定控件的点击事件
document.getElementById(me.AutoCompleteControlID).onclick = function() {
if (me.AllowAutoComplete) {
try {
if (me.handle.value != "") {
me.Auto();
}
me.currentIndex = -1; //还原当前索引
} catch (e) { }
}
}
//绑定控件的键盘弹起事件
document.getElementById(me.AutoCompleteControlID).onkeyup = function(evt) {
if (me.AllowAutoComplete) {
try {
evt = evt || window.event;
if (evt.keyCode != 40 && evt.keyCode != 38 && evt.keyCode != 39 && evt.keyCode != 37) {
me.OrgValue = me.handle.value;
}
else {//向下\向上
if (evt.keyCode == 38) me.KeyType = true;
else if (evt.keyCode == 40) me.KeyType = false;
}
me.Auto();
} catch (e) { }
}
}
//绑定控件的键盘按下事件
document.getElementById(me.AutoCompleteControlID).onkeydown = function() {
if (me.AllowAutoComplete) {
if (event.keyCode == 13) {//回车
try {
me.Select()
me.InitItem();
} catch (e) { }
}
}
}
//绑定控件的鼠标经过事件
document.getElementById(me.AutoCompleteControlID).onmouseover = function() {
if (me.AllowAutoComplete) {
me.currentIndex = -1;
}
}
//当绑定控件失去焦点时，隐藏弹出层
document.getElementById(me.AutoCompleteControlID).onblur = function() {
if (me.AllowAutoComplete) {
if (!me.FocusInDiv) {
me.Hide();
}
}
}
} /*
* 新建一个闭包，用于实现鼠标点击搜索结果时的事件，以解决通过训练传递的参数一直是最后一个索引的问题
*
* writter:zhangyu 2012-01-03
*/
function BiBaoOnMouseResult(i, me) {
this.OnMouseClickEx = function() {
me.OnTdMouseClick(i);
};
this.OnMouseOverEx = function() {
me.OnTdMouseOver(i);
};
this.OnMouseOutEx = function() {
me.OnTdMouseOut(i);
};
}
