用AJAX实现类似GOOGLE搜索框的功能

最新推荐文章于 2024-04-20 19:26:14 发布

置顶 wanglei0420

最新推荐文章于 2024-04-20 19:26:14 发布

阅读量1.7k

点赞数 1

文章标签： ajax google function xmlhttprequest dataset table

本文链接：https://blog.csdn.net/wanglei0420/article/details/1953890

版权

第一个页面；

/生成与输入内容匹配行
           function setNames(names)
           {
              if(names=="")
              {
              clearNames();
              return;
              }
              clearNames();
              setOffsets();
              var row, cell, txtNode;
              var s=names.split("$");

              for (var i = 0; i < s.length; i++)

{

                 //s[i]为td的
                    var nextNode =s[i];
                    row = document.createElement("tr");
                    cell = document.createElement("td");
                    cell.onmouseout = function() {this.style.backgroundColor='';};
                    cell.onmouseover = function() {this.style.backgroundColor='#ffff00';};
                    cell.onclick = function() { completeField(this); } ;
                    cell.pop="T";
                    txtNode = document.createTextNode(nextNode);
                   cell.appendChild(txtNode);
                    row.appendChild(cell);
                    document.getElementById("body1").appendChild(row);
              }
           }

//用来设置当鼠标失去焦点后文本框的隐藏
        document.οnmοusedοwn=function()
        {
            if(!event.srcElement.pop)
             clearNames();
         }//填写输入框
    function completeField(cell)
    {
        inputField.value = cell.firstChild.nodeValue;
        clearNames();
    }
//清除自动完成行
    function clearNames()
    {
         completeBody = document.getElementById("body1");
        var ind = completeBody.childNodes.length;
        for (var i = ind - 1; i >= 0 ; i--)
        {
                completeBody.removeChild(completeBody.childNodes[i]);
        }
        completeDiv = document.getElementById("popup");
        completeDiv.style.border = "none";
}

        //设置显示位置
           function setOffsets()
           {
               completeTable.style.width = inputField.offsetWidth; + "px";
               var left = calculateOffset(inputField, "offsetLeft");
               var top = calculateOffset(inputField, "offsetTop") + inputField. offsetHeight;
               completeDiv.style.border = "black 1px solid";
               completeDiv.style.left = left + "px";
               completeDiv.style.top = top + "px";
           }
           function calculateOffset(field, attr) {
    var offset = 0;
     while(field) {
     offset += field[attr];
     field = field.offsetParent;
    }
    return offset;
   }

<html>

</body>

</html

第二个页面（getCity.aspx）

注意：必须删除这个页面中的所有的HTML

然后在cs文件中做自己想要的处理，作为字符串输入；

getCity.cs

     string id = Request.QueryString["id"].ToString();
        SqlConnection con = new SqlConnection(sqlstr);
        con.Open();
        SqlDataAdapter da = new SqlDataAdapter("select * from airport where EnName like '%" + id + "%' or CnName like '%"+id+"%'", con);
        DataSet ds = new DataSet();
        da.Fill(ds);
        StringBuilder sb = new StringBuilder();
        for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
        {
            sb.Append(ds.Tables[0].Rows[i][2].ToString() + "   "+ds.Tables[0].Rows[i][1].ToString() + "$");
        }
        Response.Write(sb.ToString());

wanglei0420

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用AJAX实现类似GOOGLE搜索框的功能

第一个页面； function getHTTPObject() { var waystation=null; if(window.ActiveXObject) { waystation=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window
复制链接

扫一扫