AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

模仿google suggest 下拉菜单

2017-11-15 974
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
1.前台代码：
< %@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " [url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns=" [url]http://www.w3.org/1999/xhtml[/url]">
<style type="text/css">
<!--
.style1 {color: #FF0000}
.mouseOut
{
 font-size:12px;
 background: #708090;
 color: #FFFAFA;
}
.mouseOver
{
 font-size:12px;
 background: #FFFAFA;
 color: #000000;
}
-->
</style>
     <script type="text/javascript" language="javascript">
        var xmlHttp;
        var completeDiv;
        var inputField;
        var nameTable;
        var nameTableBody;
        var flag=false;
        function createXMLHttpRequest() {
            if (window.ActiveXObject) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();                
            }
        }
        
        function setflag(){
            flag = true;
        }
        
        function DisSelect()
        {
            if(flag==false)
            document.getElementById("popup").style.display="none";
        }
        function initVars() {
            inputField = document.getElementById("frmchangshang");            
            nameTable = document.getElementById("name_table");
            completeDiv = document.getElementById("popup");
            nameTableBody = document.getElementById("name_table_body");
            document.getElementById("popup").style.display="block";
        }
        function findNames() {
            initVars();
            if (inputField.value.length > 0)
    {
                createXMLHttpRequest();
                var url = "search.asp?names=" + inputField.value;  
                xmlHttp.open("GET", url, true);
                xmlHttp.onreadystatechange = callback;
                xmlHttp.send(null);
            }
    else
   {
                clearNames();
            }
        }
        function callback() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200)
                {
     try
                    {
                        var name = xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data;
                    }
                    catch(e)
                    {
                        document.getElementById("popup").style.display="none";
                        clearNames();
                    }
                    setNames(xmlHttp.responseXML.getElementsByTagName("content"));
                } 
                else if (xmlHttp.status == 204)
                {
                    clearNames();
                }
            }
        }
        
        function setNames(the_names) {            
            clearNames();
            var size = the_names.length;
            setOffsets();
            var row,cell,spans;
            for (var i = 0; i < size; i++) {
                //var nextNode = the_names[i].firstChild.data;
    var e = the_names[i];
    //取得子节点内容，重新装载为数组
    var nextNode=e.getElementsByTagName("name")[0].firstChild.data;
    //创建tr，td，span元素
                row  =document.createElement("tr");
                cell =document.createElement("td");
    //spans=document.createElement("span");
    //设置cell属性
                cell. = function() {this.className='mouseOver'; flag=false;};
                cell. = function() {this.className='mouseOut'; flag=true;};
                cell.setAttribute("bgcolor","#FFFAFA");
                cell.setAttribute("border","0");
                //cell.setAttribute("onmouseover","setflag()");
                cell.onclick = function() { populateName(this); };
    //将nextNode添加到td
    var txtName = document.createTextNode(nextNode);
    cell.appendChild(txtName);
    //装载隐藏数据到span元素
    row.appendChild(cell);
                nameTableBody.appendChild(row);
            }
        }
        function setOffsets() {
            var end = inputField.offsetWidth;
            var left = calculateOffsetLeft(inputField);
            var top = calculateOffsetTop(inputField) + inputField.offsetHeight;
            completeDiv.style.border = "black 1px solid";
            completeDiv.style.left = left + "px";
            completeDiv.style.top = top + "px";
            nameTable.style.width="400px";
        }
        
        function calculateOffsetLeft(field) {
          return calculateOffset(field, "offsetLeft");
        }
        function calculateOffsetTop(field) {
          return calculateOffset(field, "offsetTop");
        }
        function calculateOffset(field, attr) {
          var offset = 0;
          while(field) {
            offset += field[attr]; 
            field = field.offsetParent;
          }
          return offset;
        }
        function populateName(cell) {
    //填充数据到web页面，cell---->td对象
            inputField.value = cell.firstChild.nodeValue;
            clearNames();
        }
        //清除列表数组
        function clearNames() {
            var ind = nameTableBody.childNodes.length;
            for (var i = ind - 1; i >= 0 ; i--) {
                 nameTableBody.removeChild(nameTableBody.childNodes[i]);
            }
            completeDiv.style.border = "none";
        }
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
</head>
<body>
<input name="frmchangshang" class="InputText" id="frmchangshang"  style="width:250px;" onBlur="DisSelect();" onKeyUp="findNames();" size="50" maxlength="100">
                    &nbsp;<span class="style1">提示：输入关键字，程序自动从库中匹配您要找的记录，如果不存在自行填写
         </span>
                    <div style="position:absolute;top:0;left:0;" id="popup">
                        <table id="name_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0">            
                            <tbody id="name_table_body"></tbody>
                        </table>
                  </div>
</body>
</html> 
2.后台search.asp异步查询数据页面
把sql语句和要显示的字段改为自己的数据库相对应格式就可以了。
<!--#include virtual="conn.asp" -->
<%
keyword=request.QueryString("names")
sql="select lgid,lgmc from lg where lgmc like '%"&keyword&"%' order by lgid desc"
set rs=server.CreateObject("adodb.recordset")
rs.open sql,conn,1,1
Response.ContentType="text/xml"    
response.Write "<?xml version=""1.0"" encoding=""GB2312"" ?>"
response.Write "<response>"
do while not rs.eof
response.Write "<content>"
response.Write "<name>"&rs("lgmc")&"</name>"
'response.Write "<userid>"&rs("userid")&"</userid>"
'response.Write "<startime>"&rs("startime")&"</startime>"
'response.Write "<endtime>"&rs("endtime")&"</endtime>"
response.Write "</content>"
rs.movenext
loop
response.Write "</response>"
rs.close
set rs=nothing
%>









本文转自 牛海彬 51CTO博客，原文链接：http://blog.51cto.com/newhappy/136074，如需转载请自行联系原作者
文章标签：
前端开发
JavaScript
SQL
数据格式
数据库
XML
余二五
目录
相关文章
疯狂学习GIS
|
8月前
|
数据可视化 定位技术 Sentinel
如何用Google Earth Engine快速、大量下载遥感影像数据？
【2月更文挑战第9天】本文介绍在谷歌地球引擎（Google Earth Engine，GEE）中，批量下载指定时间范围、空间范围的遥感影像数据（包括Landsat、Sentinel等）的方法~
疯狂学习GIS
2767 1
如何用Google Earth Engine快速、大量下载遥感影像数据？
此星光明
|
8月前
|
编解码 人工智能 算法
Google Earth Engine——促进森林温室气体报告的全球时间序列数据集
Google Earth Engine——促进森林温室气体报告的全球时间序列数据集
此星光明
105 0
此星光明
|
8月前
|
编解码 人工智能 数据库
Google Earth Engine（GEE）——全球道路盘查项目全球道路数据库
Google Earth Engine（GEE）——全球道路盘查项目全球道路数据库
此星光明
172 0
此星光明
|
8月前
|
编解码
Open Google Earth Engine（OEEL）——matrixUnit(...)中产生常量影像
Open Google Earth Engine（OEEL）——matrixUnit(...)中产生常量影像
此星光明
89 0
此星光明
|
8月前
Google Earth Engine（GEE）——导出指定区域的河流和流域范围
Google Earth Engine（GEE）——导出指定区域的河流和流域范围
此星光明
308 0
此星光明
|
8月前
|
传感器 编解码 数据处理
Open Google Earth Engine（OEEL）——哨兵1号数据的黑边去除功能附链接和代码
Open Google Earth Engine（OEEL）——哨兵1号数据的黑边去除功能附链接和代码
此星光明
151 0
此星光明
|
8月前
Google Earth Engine（GEE）——当加载图表的时候出现错误No features contain non-null values of “system:time_start“.
Google Earth Engine（GEE）——当加载图表的时候出现错误No features contain non-null values of “system:time_start“.
此星光明
139 0
此星光明
|
8月前
|
编解码 定位技术
Google Earth Engine（GEE）——导出后的影像像素不同于原始Landsat影像的分辨率（投影差异）
Google Earth Engine（GEE）——导出后的影像像素不同于原始Landsat影像的分辨率（投影差异）
此星光明
235 0
此星光明
|
8月前
|
机器学习/深度学习 算法 数据可视化
基于Google Earth Engine云平台构建的多源遥感数据森林地上生物量AGB估算模型含生物量模型应用APP
基于Google Earth Engine云平台构建的多源遥感数据森林地上生物量AGB估算模型含生物量模型应用APP
此星光明
259 0
疯狂学习GIS
|
8月前
|
存储 编解码 数据可视化
Google Earth Engine获取随机抽样点并均匀分布在栅格的不同数值区中
【2月更文挑战第14天】本文介绍在谷歌地球引擎（Google Earth Engine，GEE）中，按照给定的地表分类数据，对每一种不同的地物类型，分别加以全球范围内随机抽样点自动批量选取的方法~
疯狂学习GIS
702 1
Google Earth Engine获取随机抽样点并均匀分布在栅格的不同数值区中

热门文章

最新文章

  • 1
    Java服务端集成Google FCM推送的注意事项和实际经验
  • 2
    Google提出的网页性能评价指标
  • 3
    成功注册Google的SerpAPI实现AI Agent的tool
  • 4
    Google Gemini意外超越OpenAI，跃居第一，但基准测试结果并不能说明全部情况
  • 5
    Google和IMAX放弃VR相机
  • 6
    Google App Engine Web开发之java类到网址的映射——实现用java类处理jsp页面的提交
  • 7
    使用Google Page Speed
  • 8
    3分钟带你了解：轻量级依赖注入框架Google Guice【享学Java】（下）
  • 9
    Google Earth Engine（GEE）——Sentinel-1 和 2 数据的融合，水稻范围识别和水稻种植季节区分地图绘制—马来西亚为例
  • 10
    google guice @inject comments
  • 1
    Google云计算原理与应用（四）
    177
  • 2
    Google云计算原理与应用（三）
    177
  • 3
    Google云计算原理与应用（二）
    154
  • 4
    Google云计算原理与应用（一）
    246
  • 5
    Android框架-Google官方Gson解析，android开发实验报告总结
    160
  • 6
    容器服务Kubernetes版产品使用合集之registry.aliyuncs.com/google_containers 镜像仓库的地址是什么
    750
  • 7
    [wordpiece]论文分析：Google’s Neural Machine Translation System
    98
  • 8
    如何在Android真机上检测是否有Google Map add-on
    83
  • 9
    android2.3.4没有google map的真机上增加google map（原创）
    69
  • 10
    Python中Keras微调Google Gemma：定制化指令增强大语言模型LLM
    124

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月