js 自动补全

时间：2015-03-05 17:01:58 阅读：208 评论：0 收藏：0 [点我收藏+]

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");//初始化默认选择第一个数据

//当单击某个ＬＩ时反映
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-1;
}
jQuery("#autoTxt li").css("background", "#FFFFFF");
jQuery("#autoTxt li:eq("+thisCount+")").css("background", "#A8A5A5");
}else if(40==v){//下键
if(thisCount<maxcount-1){
++thisCount;
}else{
thisCount = 0;
}
jQuery("#autoTxt li").css("background", "#FFFFFF");
jQuery("#autoTxt li:eq("+thisCount+")").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对象就行了详细代码就不展示了，只说一下封装json代码

JSONArray arr=new JSONArray();

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

js 自动补全

标签：自动补全 js java

原文地址：http://blog.csdn.net/java_xiaobin/article/details/44083663

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行