- js 代码
- //---------------------------------------------------自动补全begin--------------------------------
- var maxcount = 0;// 表示他最大的值
- var thisCount =0;// 初始化他框的位置
- var flagThis = 0;
- var flag = 0; //标示是否选择自动补全
- //自动补全方法
- function zdbq(obj){
- var id = obj;
- 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");//初始化默认选择第一个数据
- //当单击某个LI时反映
- 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;
- }
- }
- );
- //=====================自动补全公共部分开始=================================
- //当单击BODY时则隐藏搜索值
- 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里面需要写的代码
- <!-- 自动补全用到的 -->
- <!-- 存放名称的id -->
- <input type="hidden" value="" name="zdbqid" id="zdbqid"/>
- <!-- 显示的div -->
- <div style="width:180px; z-index:99999999; display:none; background:#FFFFFF; position: absolute;" id="autoTxt"></div>
- 在body中使用
- onload="zdbq('自动补全input的id');"
- 只要在后台封装成json对象就行了 详细代码就不展示了,只说一下封装json代码
- JSONArray arr=new JSONArray();
- Object[] obj = new Object[]{名称,id}; //名称和id传递到前台
- arr.add(obj);
来源: http://www.phpxs.com/code/1003703/