js 自动补全

js 代码
//---------------------------------------------------自动补全begin--------------------------------
var maxcount = 0;// 表示他最大的值
var thisCount =0;// 初始化他框的位置
var flagThis = 0;
var flag = 0; //标示是不是选择自动补全
//自动补全方法
function zdbq(obj){
var id = obj.id;
document.getElementById(zdbqid).value = id;
jQuery(#+id).keyup(function(even) {
document.getElementById(autoTxt).style.width= 214+px;
var v = even.which;
//回车键：13；上键38；下键40// 当点击上下键或肯定键时禁止他传送数据
if (v == 38 || v == 40 || v == 13){
return;
}
var txt = jQuery(#+id).val();//这里是获得他的输入框的值
if (txt != ) {
jQuery.ajax({
url : xxx_xxx.action,//从后台获得json数据
type : post,
dataType : json,
data : {name : txt
},
success : function(ls) {
flagThis = 1;
var offset = jQuery(#+id).offset();//offset() 方法返回或设置匹配元素相对文档的偏移（位置）。
jQuery(#autoTxt).show();
jQuery(#autoTxt).css(top,(offset.top + 22) + px);
jQuery(#autoTxt).css(left,offset.left + px);
var Candidate = ;
maxcount = 0;//再重新得值
var list=eval(ls);
jQuery.each(list,function(k,v) {
var nn=(v+).split(,);
Candidate += <li style=温@良@顺list-style:none温@良@顺 id=温@良@顺+maxcount+温@良@顺>+nn[0]+</li><span id=温@良@顺hhh温@良@顺 style=display:none >+nn[1]+</span>;
maxcount++;
});
jQuery(#autoTxt).html(Candidate);
jQuery(#autoTxt li:eq(0)).css(background,#A8A5A5);//初始化默许选择第1个数据

//当单击某个ＬＩ时反应
jQuery(#autoTxt li).click(function(){
flag = 1; //标示是不是选择自动补全
var jgname=jQuery(#autoTxt li:eq(+this.id+)).text(); //获得名称
var fid = jQuery(#autoTxt span:eq(+thisCount+)).text(); //获得id
jQuery(#+id).val(jgname); //放入名称
$(#jcid).val(fid); //放入id
jQuery(#autoTxt).html();
jQuery(#autoTxt).hide();
});
//移动对象
jQuery(#autoTxt li).hover(function(){
jQuery(#autoTxt li).css(background,#FFFFFF);
jQuery(#autoTxt li:eq(+this.id+)).css(background,#A8A5A5);
thisCount=this.id;},function(){
jQuery(#autoTxt li).css(background,#FFFFFF);});
},
error : function() {
jQuery(#autoTxt).html();
jQuery(#autoTxt).hide();
maxcount = 0;
}
});
} else {
jQuery(#autoTxt).html();
jQuery(#autoTxt).hide();
maxcount = 0;
}
}
);
//=====================自动补全公共部份开始=================================
//当单击ＢＯＤＹ时则隐藏搜索值
jQuery(body).click(function(){
jQuery(#autoTxt).html();
jQuery(#autoTxt).hide();
thisCount=0;
});
}

//键盘选择
jQuery(function(){

//键盘按键移动事件上键38,下键40,肯定键13
jQuery(body).keyup(
function(even){
var id = document.getElementById(zdbqid).value;
var v = even.which;
if(38==v){//上键
if(thisCount>0){
--thisCount;
}else{
thisCount = maxcount⑴;
}
jQuery(#autoTxt li).css(background,#FFFFFF);
jQuery(#autoTxt li:eq(+thisCount+)).css(background,#A8A5A5);
}else if(40==v){//下键
if(thisCount<maxcount⑴){
++thisCount;
}else{
thisCount = 0;
}
jQuery(#autoTxt li).css(background,#A8A5A5);
}else if(13==v){//肯定键
flag = 1; //标示是不是选择自动补全
var jgname=jQuery(#+thisCount).text(); //获得名称
var fid = jQuery(#autoTxt span:eq(+thisCount+)).text(); //获得id
if(jgname!=){
jQuery(#+id).val(jgname); //放入名称
}
if(fid!=){
$(#jcid).val(fid); //放入id
}
jQuery(#autoTxt).html();
jQuery(#autoTxt).hide();
}else {
if(jQuery(#autoTxt).html()!=){
thisCount=0;
}
}
}
);
});

//---------------------------------------------------自动补全end--------------------------------

body里面需要写的代码

<input type=hidden value= name=zdbqid id=zdbqid/>

<div style=width:180px; z-index:99999999; display:none; background:#FFFFFF; position: absolute; id=autoTxt></div>

在input中使用

onkeyup=zdbq(this);

只要在后台封装成json对象就好了详细代码就不展现了，只说1下封装json代码

JSONArray arr=new JSONArray();

Object[] obj = new Object[]{名称,id}; //名称和id传递到前台
arr.add(obj);

相关推荐