前台:
var maxcount = 0;// 表示他最大的值
var thisCount =0;// 初始化他框的位置
var flagThis = 0;
var flag = 0; //标示是否选择自动补全
var zdbqid;
$(function(){
$("body").prepend("<div style='width:120px; display:none; background:#FFFFFF; position: absolute;z-index:9999' id='autoTxt'></div>");
//键盘按键移动事件上键38,下键40,确定键13
$("body").keyup(function(even){
var id = zdbqid+"_txt";
var v = even.which;
if(38==v){//上键
if(thisCount>0){
--thisCount;
}else{
thisCount = maxcount-1;
}
$("#autoTxt li").css("background", "#FFFFFF");
$("#autoTxt li:eq("+thisCount+")").css("background", "#3b5998");
}else if(40==v){//下键
if(thisCount<maxcount-1){
++thisCount;
}else{
thisCount = 0;
}
$("#autoTxt li").css("background", "#FFFFFF");
$("#autoTxt li:eq("+thisCount+")").css("background", "#3b5998");
}else if(8==v){//删除键BackSpace BackSpace
var text = $("#"+id).val();
var title = $("#"+id).attr("title");
if(text && text.length>0){
var lastChar = text.substring(text.length-1,text.length);
if(lastChar=="," || lastChar=="," || lastChar=="、"){
text = text.substring(0,text.length-1);
}
if(text.length < title.length){//去掉不完整对象
var comp = $("#"+id).attr("comp");
var compobj,compvalue,comptxt;
if(comp && comp!=""){
compobj = eval("({"+comp+"})");
compvalue = compobj.value;
comptxt = compobj.text;
}
compobj.value = compvalue.substring(0,compvalue.lastIndexOf(","));
compobj.text = comptxt.substring(0,comptxt.lastIndexOf("、"));
$("#"+id).attr("title",compobj.text);
$("#"+zdbqid).val(compobj.value);//放入id
comp = JSON.stringify(compobj);
$("#"+id).attr("comp",comp.substring(1,comp.length-1));
}
}
}else if(13==v){//确定键
flag = 1; //标示是否选择自动补全
var jgname=$("#"+thisCount).text();//获取名称
var fid = $("#autoTxt span:eq("+thisCount+")").text();//获取id
//判断选择是多选还是唯一选择
var isMultiple = false;//是否进行多值多次匹配
var comp = $("#"+id).attr("comp");
var compobj,compvalue,comptxt;
if(comp && comp!=""){
compobj = eval("({"+comp+"})");
if(compobj.maxSize && parseInt(compobj.maxSize) > 1){
isMultiple = true;
}
compvalue = compobj.value;
comptxt = compobj.text;
}
if(isMultiple && compvalue){
if(compvalue.indexOf(""+fid) <0){
compobj.value = (compvalue && compvalue.length>0)?compvalue+","+fid:fid;
compobj.text = (comptxt && comptxt.length>0)?comptxt+"、"+jgname:jgname;
}
}else{
compobj.value = fid;
compobj.text = jgname;
}
if(compobj.text!=""){
$("#"+id).val(compobj.text);//放入名称
$("#"+id).attr("title",compobj.text);
}
if(compobj.value!=""){
$("#"+zdbqid).val(compobj.value);//放入id
}
comp = JSON.stringify(compobj);
$("#"+id).attr("comp",comp.substring(1,comp.length-1));
$("#autoTxt").html("");
$("#autoTxt").hide();
}else {
if($("#autoTxt").html()!=""){
thisCount=0;
}
}
}
);
});
function obtainInfo(key,type,even){
zdbqid = key;
var id = key+"_txt";
//div的宽度更控件宽度一样
document.getElementById("autoTxt").style.width= document.getElementById(""+id).style.width;
var v = even.which;
//回车键:13;上键38;下键40// 当点击上下键或者确定键时阻止他传送数据
if (v == 38 || v == 40 || v == 13){
return;
}
var txt = $("#"+id).val();//这里是取得他的输入框的值
txt = txt.replace("/^\n+|\n+$/g","");//去掉末尾的空格换行
//判断选择是多选还是唯一选择
var isMultiple = false;//是否进行多值多次匹配
var comp = $("#"+id).attr("comp");
var compobj,compvalue,comptxt;
if(comp && comp!=""){
compobj = eval("({"+comp+"})");
if(compobj.maxSize && parseInt(compobj.maxSize) > 1){
isMultiple = true;
}
compvalue = compobj.value;
comptxt = compobj.text;
}
var oldTxt = txt;
txt = checkIllegalChar(txt);
var arr = txt.split("、");
if(isMultiple && arr.length > 1){
txt= arr[arr.length-1];
}else if(arr.length > 1){
alert("只能输入一个");
return false;
}
if (txt != "") {
$.ajax({
url : "/collaboration.do?method=autocompleter&type="+type+"&textValue="+encodeURIComponent(encodeURIComponent(txt)),//从后台取得json数据
success : function(data) {
if(data.length <=0) return;
var arr = data.split(",");
maxcount = arr.length;
flagThis = 1;
var offset = $("#"+id).offset();//offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。
$("#autoTxt").show();
$("#autoTxt").css("top", (offset.top + 22) + "px");
$("#autoTxt").css("left", offset.left + "px");
var Candidate = "";
for(var i=0;i<arr.length;i++){
var nn=arr[i].split("#@#");
Candidate += "<li style='list-style:none' id='"+i+"'>"+nn[0]+"</li><span id='hhh' style=display:none >"+nn[1]+"</span>";
}
$("#autoTxt").html(Candidate);
$("#autoTxt li:eq(0)").css("background", "#3b5998");//初始化默认选择第一个数据
//当单击某个LI时反映
$("#autoTxt li").click(function(){
flag = 1;//标示是否选择自动补全
var jgname=$("#autoTxt li:eq("+this.id+")").text();//获取名称
var fid = $("#autoTxt span:eq("+thisCount+")").text();//获取id
if(isMultiple && compvalue){
if(compvalue.indexOf(""+fid) <0){
compobj.value = (compvalue && compvalue.length>0)?compvalue+","+fid:fid;
compobj.text = (comptxt && comptxt.length>0)?comptxt+"、"+jgname:jgname;
}
}else{
compobj.value = fid;
compobj.text = jgname;
}
comp = JSON.stringify(compobj);
$("#"+id).attr("comp",comp.substring(1,comp.length-1));
$("#"+id).attr("title",compobj.text);
$("#"+id).val(compobj.text);//放入名称
$("#"+key).val(compobj.value);//放入id
$("#autoTxt").html("");
$("#autoTxt").hide();
});
//移动对象
$("#autoTxt li").hover(function(){
$("#autoTxt li").css("background", "#FFFFFF");
$("#autoTxt li:eq("+this.id+")").css("background", "#3b5998");
thisCount=this.id;
},function(){
$("#autoTxt li").css("background", "#FFFFFF");
});
}
});
}else{
$("#autoTxt").html("");
$("#autoTxt").hide();
maxcount = 0;
}
}
/**
* 将输入的多信息字符串特殊字符换成“、”
*
* @param obj
* @return
*/
function checkIllegalChar(val) {
if (val) {
val =val.replace(/,/g,'、');
val =val.replace(/,/g,'、');
}
return val;
}
后台传出的字符串格式为:名称#@#类型|id,名称#@#类型|id