js实现类似百度提示功能

浏览数：17 / 时间：2015年06月09日

<div>
   <input id="condition" name="object.name" type="text" onkeyup="doQuery()"/> 这个键盘事件很重要实现动态交互
   <div id="div" style="position: absolute;z-index: 100">
	  <table id="table">  
	  </table>
   </div>
<div>

以上是基本的JSP页面

-----------------------------------------------------------------------------------------------------------------------------------------------------

对应的JS代码

$(function(){
             $("condition").val("");//刷新的时候清除表单值
    //----------------------提示信息--------------------------------
            $("#condition").bind("mouseover", function () {
                doQuery();
                $("#div").show();
            }).bind("mouseout", function () {
                $("#div").hide();
            }).bind("onkeyup",function(){
                getLinkData();
            });
            
            $("#div").bind("mouseover", function () {
                $("#div").show();
            }).bind("mouseout", function () {
                $("#div").hide();
            })
});

function getLinkData() {
                var div = $("#div");            //获得对应的div对象
                var table= $("#table");       //获得对应的tbody对象
                var condition= $("#table");  //获得对应的输入框对象
                clear();//清除联想输入提示框的内容
                //利用ajax获取后台的模糊查询的数据，并且封装成下拉列表的形式展现出来
                $.ajax( {
                    type : "POST",
                    dataType : "json",
                    url : $.WEB_ROOT + ‘‘,
                    data : jQuery.param( {
                        "condition":$.trim($("#condition").val())},
                    
             error:function(){
                                alert("没有对应的数据，请查看输入的查询条件！");
                                },
                    success : function(data) {//当Ajax提交成功时调用的方法
                                  if(data.length==0){
                                      return;
                                      }
                                  setOffsets();//设置联想输入下拉列表提示框的位置
                                  var tr,td,text;
                                  for (var i = 0; i < data.length; i++) {//根据返回的值，手动的拼tbody的内容
                                      text = document.createTextNode(data[i].name);//从Action中返回的数据中取出name的值
                                      td = document.createElement("td");//创建一个td的对象           
                                      tr = document.createElement("tr");//创建一个tr的对象      className="mouseOver;     
                                      $(td).mouseover(function(){
                                          $(this).attr("class","mouseOver");
                                      });
                                      $(td).mouseout(function(){
                                          $(this).attr("class","");
                                      });
                                      td.onclick = function(){populateModel(this)};//单击td是的方法为populateModel   
                                      td.appendChild(text);
                                      tr.appendChild(td);            
                                      div.appendChild(tr);
                                  }
                                }
                        });
                //点击下拉列表中的某个选项时调用的方法
                function populateModel(cell) {
                        clear();
                        condition.value = cell.firstChild.nodeValue;
                        //initOtherData(condition.value);利用输入框中的数据调用其他方法，初始化其他数据
                        clear();//清除自动完成行                        
                }
                //清除自动完成行，只要tbody有子节点就删除掉，并且将将外围的div的边框属性设置为不可见的
                function clear() {
                    while (div.childNodes.length > 0) {
                        div.removeChild(div.firstChild);
                    }
                    div.attr("display", "none");
                }
                //设置下拉列表的位置和样式
                function setOffsets() {
                    var width = condition.offsetWidth;//获取linkDataProperty输入框的相对宽度
                    var left = getLeft(condition);
                    var top = getTop(condition) + condition.offsetHeight;
            
                    div.style.border = "black 1px solid";
                    div.style.left = left + "px";
                    div.style.top = top + "px";
                    div.style.width = width + "px";
                }
                //获取指定元素在页面中的宽度起始位置
                function getLeft(e) {
                    var offset = e.offsetLeft;
                    if (e.offsetParent != null) {
                        offset += getLeft(e.offsetParent);
                    }
                    return offset;
                }
                //获取指定元素在页面中的高度起始位置
                function getTop(e) {
                    var offset = e.offsetTop;
                    if (e.offsetParent != null) {
                        offset += getTop(e.offsetParent);
                    }
                    return offset;
                }
            }
        
          //清空输入框中的数据
            function clear() {
                var condition=document.getElementById("condition");
                condition.value="";
            }