Heim  >  Artikel  >  Web-Frontend  >  js-Autovervollständigung

js-Autovervollständigung

大家讲道理
大家讲道理Original
2016-11-10 13:22:501379Durchsuche

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=&#39;list-style:none&#39; id=&#39;"+maxcount+"&#39;>"+nn[0]+"</li><span id=&#39;hhh&#39; 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(&#39;自动补全input的id&#39;);"
 
 
只要在后台封装成json对象就行了 详细代码就不展示了,只说一下封装json代码
 
JSONArray arr=new JSONArray();
 
Object[] obj = new Object[]{名称,id}; //名称和id传递到前台
arr.add(obj);

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn