test

    技术2022-05-13  21

    //表示当前高亮的节点var heightLightIndex = -1;var timeoutId;$(document).ready(function(){ var wordInput = $("#word"); var wordInputOffset = wordInput.offset(); //自动补全框最开始应该隐藏起来  $("#auto").hide().css("border","1px black solid")     .css("position","absolute")     .css("left",wordInputOffset.left + "px")     .css("top",wordInputOffset.top + wordInput.height() + 5 + "px")     .width(wordInput.width() + 4);  //给文本框添加键盘按下并弹起的事件 wordInput.keyup(function() {  //如果输入的内容不为空,刚将数据发送给服务器  if(wordInput.val() == "" )   {   //当框隐藏时,高亮框的索引值应为-1,表示没有高亮显示的   heightLightIndex = -1;   $("#auto").hide();   return;  }  var keyCode = event.keyCode;    //如果输入的是向上38向下40键刚将选中的内容赋值给输入框  if(wordInput.val() != "" && (keyCode == 38 || keyCode == 40))  {   //alert("sdfdsf");   if(keyCode == 38)   {    //向上    var autoNodes = $("#auto").children("div");    if(heightLightIndex != -1)    {     autoNodes.eq(heightLightIndex).css("background-color","white");    }    //改变要高亮显示的节点的索引值    if(heightLightIndex == 0)    {     //如果修改索引值以后index变为-1,则将索引值指向最后一个元素     heightLightIndex = autoNodes.length - 1;         }    else    {     heightLightIndex--;    }    autoNodes.eq(heightLightIndex).css("background-color","red");   }   if(keyCode == 40)   {    //向下    var autoNodes = $("#auto").children("div");    if(heightLightIndex != -1)    {     autoNodes.eq(heightLightIndex).css("background-color","white");    }    //改变要高亮显示的节点的索引值    if(heightLightIndex == autoNodes.length - 1)    {     //如果修改索引值以后index变为-1,则将索引值指向最后一个元素     heightLightIndex = 0;         }    else    {     heightLightIndex++;    }    autoNodes.eq(heightLightIndex).css("background-color","red");   }   return;  }  else if(keyCode == 13)  {   //如果按下的是回车键      $("#auto").hide();   //下拉框有高亮内容   if(heightLightIndex != -1)   {    var comText = $("#auto").children("div").eq(heightLightIndex).text();    heightLightIndex = -1;    $("#word").val(comText);   }   else   {    //下拉框没有高亮内容      alert("数据[" + $("#word").val() + "]正在搜索,请稍后.....");        //让文本框失去焦点    $("#word").get(0).blur();   }      return;  }      //1.首先获取文本框中的内容  var wordText = $("#word").val();  //对上次未完成的延时操作进行取消  clearTimeout(timeoutId);    //将和服务器进行操作延迟500毫秒  timeoutId = setTimeout(function(){  //2.将文本框的内容发送给服务器  $.post("AutoComplete",{word:wordText},function(data){   //将dom对象输入成JQuery对象   var jqueryObj = $(data);   //找到所有的word节点   var wordNodes = jqueryObj.find("word");   //遍历所有的word节点,取出所有的单词内容,然后将单词内容添加到弹出框中   var autoNode = $("#auto");   //需要清空原来的内容   autoNode .html("");   wordNodes.each(function(i){    //获取单词的内容    var wordNode = $(this);    //新建div节点,将单词内容加入到新建的节点中    //将新建的节点加入到弹出框的节点中    var newDivNode = $("<div>").attr("id",i);    newDivNode.html(wordNode.text()).appendTo(autoNode);    //增加鼠标进入事件,高亮节点    newDivNode.mouseover(function(){     //将原来的节点取消高亮显示     if(heightLightIndex != -1)     {      $("#auto").children("div").eq(heightLightIndex).css("background-color","white");     }     //记录新的高亮显示节点索引     heightLightIndex = $(this).attr("id");     //鼠标进入的节点高亮     $(this).css("background-color","red");    });    //增加鼠标移出事件,取消高亮显示节点    newDivNode.mouseout(function(){     //取消当前节点的高亮显示     $(this).css("background-color","white");    });        //鼠标点击当前节点,可以进行补全    newDivNode.click(function(){     //var comText = $("#auto").children("div").eq(heightLightIndex).text();     heightLightIndex = -1;     //$("#word").val(wordNode.text());     $("#word").val($(this).text());     $("#auto").hide();    });   });   //让弹出框进行显示(当服务器端有数据返回的时候)   if(wordNodes.length > 0)   {    $("#auto").show();   }   else   {    //当框隐藏时,高亮框的索引值应为-1,表示没有高亮显示的    heightLightIndex = -1;    $("#auto").hide();   }  },"xml"); });},500);    //给搜索按钮添加单击事件 $("input[type='button']").click(function(){  alert("数据[" + $("#word").val() + "]正在搜索,请稍后....."); });});


    最新回复(0)