javascript实现自动补全
网上下载的什么autocomplete 都是 先加载所有的数据在自动补全
数据量大了浏览器加载就会很慢 写个点击自动加载的 而且很简单可以直接套用autoImport 方法 不需要格外的样式 不过要引用jquery的js
//服务器端输出数据 格式定义[{Id:"1",Name:"jiaozi"},{Id:"2",Name:"min"}]
//参数1 为当前文本框的对象
//参数2 为获取数据的路径
//参数3 在一个页面当存在多个文本框需要补全时 唯一标识符
//参数4 当用户选择了一条数据的回调方法名称
function autoImport(c,urlPath,divId,huidiao){
if(document.getElementById(divId)!=null){
var tableV=document.getElementById(divId).getElementsByTagName('table')[0];
var currentCount=tableV.getAttribute("currentCount");
if(currentCount==null || typeof(currentCount)=='undefined')
currentCount=-1;
else
currentCount=parseInt(currentCount);
//这个if表示上 偶数行 background-color:#eeeeee; 选中行 #0a246a
if(event.keyCode == 38 || event.keyCode == 40){
//还原所有的颜色
for(var i=0;i<tableV.rows.length ;i++){
if(i%2==1){
tableV.rows[i].style.background='#eeeeee';
}
else{
tableV.rows[i].style.background='';
}
tableV.rows[i].style.color='black';
}
if (event.keyCode == 38) {
if(currentCount==0){
currentCount=currentCount;
}else{
currentCount=currentCount-1;
}
}
//这个if表示下
if (event.keyCode == 40) {
if(currentCount==(tableV.rows.length-1)){
currentCount=currentCount;
}else{
currentCount=currentCount+1;
}
}
//alert(currentCount);
tableV.rows[currentCount].style.background='#0a246a';
tableV.rows[currentCount].style.color='white';
tableV.setAttribute("currentCount",currentCount);
return;
}
//选择左右
if (event.keyCode == 39 || event.keyCode == 37) {
if(currentCount!=-1){
tableV.rows[currentCount].click();
//var evt = document.createEvent("MouseEvents");
//evt.initEvent("click", true, true);
//tableV.rows[currentCount].dispatchEvent(evt);
return;
}
}
document.body.removeChild(document.getElementById(divId));
}
//通过ajax获取结果
var result='';
$.ajax(
{
type: "post",
url: urlPath,
async:false,
data:null,
success:function(msg){
result=msg;
if(divId==null)
divId="divId";
try{
var result=eval("{"+result+"}");
}catch(e){
return;
}
//添加失去焦点事件失去焦点关闭div
/**
c.onblur=function(){
if(document.getElementById(divId)!=null){
document.body.removeChild(document.getElementById(divId));
}
}
**/
var rwidth=c.offsetWidth;
var ry=c.offsetTop;
var rx=c.offsetLeft;
while(c=c.offsetParent)
{
ry+=c.offsetTop;
rx+=c.offsetLeft;
}
ry=ry+25;
var dv= document.createElement("div");
document.onclick=function(){
if(document.getElementById(divId)!=null){
document.body.removeChild(document.getElementById(divId));
}
}
dv.id=divId;
dv.style.zIndex="2000";
var htmlDiv="<table style=\"border:1px solid black;border-collapse:collapse;background-color:white\" width=\""+rwidth+"px\" >";
for(var i=0;i<result.length;i++){
var vId=result[i].Id;
var vName=result[i].Name;
var vDistict=result[i].District;
var vDistictName=result[i].DistrictName;
if(i%2==1){
htmlDiv+="<tr onclick=\""+huidiao+"('"+vId+"','"+vName+"','"+vDistict+"','"+vDistictName+"');document.body.removeChild(document.getElementById('"+divId+"'))\" style=\"FONT-FAMILY: Arial, 宋体; FONT-SIZE: 12px;height:20px;width:"+rwidth+"\""+
"onmouseover=\" for(var i=0;i<this.parentNode.parentNode.rows.length ;i++){ if(i%2==1){ this.parentNode.parentNode.rows[i].style.background='#eeeeee'; } else{ this.parentNode.parentNode.rows[i].style.background=''; } this.parentNode.parentNode.rows[i].style.color='black'; } ;this.style.background='#0a246a';this.style.color='white';this.parentNode.parentNode.setAttribute('currentCount',"+i+")\""+
"onmouseout=\"this.style.background='';this.style.color='black'\"><td>"+vName+
"</td></tr>";
}else{
htmlDiv+="<tr onclick=\""+huidiao+"('"+vId+"','"+vName+"','"+vDistict+"','"+vDistictName+"');document.body.removeChild(document.getElementById('"+divId+"'))\" onmouseover=\" for(var i=0;i<this.parentNode.parentNode.rows.length ;i++){ if(i%2==1){ this.parentNode.parentNode.rows[i].style.background='#eeeeee'; } else{ this.parentNode.parentNode.rows[i].style.background=''; } this.parentNode.parentNode.rows[i].style.color='black'; } ;this.style.background='#0a246a';this.style.color='white';this.parentNode.parentNode.setAttribute('currentCount',"+i+")\"onmouseout=\"this.style.background='#eeeeee';this.style.color='black'\" style=\"FONT-FAMILY: Arial, 宋体;FONT-SIZE: 12px;background-color:#eeeeee;height:20px;width:"+rwidth+"\"><td >"+vName+"</td></tr>";
}
}
htmlDiv+="</table>";
dv.innerHTML=htmlDiv;
dv.style.top=ry;
dv.style.left=rx;
dv.style.width=rwidth;
dv.style.position="absolute";
document.body.appendChild(dv);
}});
}
action方法
public String toSyncEnt() {
try {
String result=InitList.getEntString(CommonUtils.decodeStr(entName));
ServletActionContext.getResponse().setContentType("text/html; charset=UTF-8");
ServletActionContext.getResponse().getWriter().print(result);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
InitList
public static String getEntString(String name) {
List<EnterPriceInfo> epis = getEntList();
String str = "[";
for (int i = 0; i < epis.size() && i<=11; i++) {
EnterPriceInfo epi = epis.get(i);
if (name==null || epi.getEnterPriceName().contains(name))
str += "{Id:'" + epi.getEnterPriceId()
+ "',Name:'" + epi.getEnterPriceName()
+ "'},";
}
str = str.substring(0, str.length() - 1);
str += "]";
return str;
}
html页面调用
<INPUT id="scqy" onclick="autoImport('<%=path %>/entAjax/toSyncEnt.do?entName='+encodeStr(this.value),'div11')" name="medInfo.productName" style="width:95%" value="${medInfo.productName}">
这里未设置回调方法 默认方法为：
function valueToCtl(Id,Name){
//在页面定义这个方法
}