模仿google suggest 下拉菜单 -

ww20042005

浏览: 1781 次
性别:
来自: 北京

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (2)

社区版块

存档分类

2010-04 ( 2)
更多存档...

模仿google suggest 下拉菜单

Google ASP SQL SQL Server JavaScript

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">

</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.onmouseout = function() {this.className='mouseOver'; flag=false;};
                cell.onmouseover = 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">
                     <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语句和要显示的字段改为自己的数据库相对应格式就可以了。

<%
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
%>

分享到：

SAAS

2010-04-29 18:24
浏览 941
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

ASP模仿google suggest风格实现下拉菜单效果: 在本文中，我们将探讨如何使用ASP来模仿Google Suggest风格的下拉菜单效果。Google Suggest是一种自动补全功能，当用户在搜索框中输入文本时，它会提供与输入内容匹配的相关建议。这种功能提高了用户体验，减少了...

仿google,百度搜索提示功能: 这些结果随后通过JavaScript动态展示在下拉菜单中，为用户提供即时的搜索建议。在项目中，`google.js`文件可能包含了使用AJAX实现的搜索提示逻辑，包括事件监听、发送Ajax请求、处理返回数据以及在页面上动态渲染...

jquery常用插件: - **简介**: 模仿Google Suggest功能的一款jQuery插件，提供了丰富的自定义选项。 - **特点**: 高度可定制化，用户体验接近Google的自动补全搜索。 #### lightbox图片展示 **1. Facebox** - **简介**: 一个基于...

AJAX基础概念、核心技术与典型案例(内涵动态实例): 程序描述：本章模仿Google ig，使用Ajax技术实现一个个性化主页系统。通过拖拽方式设置主页，当完成拖拽窗口时，自动保存布局，使用户可以随时根据喜好来设置布局。 /login.jsp 登录页面 /homepage.jsp ...

毕设单片机实战项目基于esp8266的高考倒计时.zip: 【项目资源】：单片机项目适用于从基础到高级的各种项目，特别是在性能要求较高的场景中，比如操作系统开发、嵌入式编程和底层系统编程。如果您是初学者，可以从简单的控制台程序开始练习；如果是进阶开发者，可以尝试涉及硬件或网络的项目。【项目质量】：所有源码都经过严格测试，可以直接运行。功能在确认正常工作后才上传。【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担。 2. 部分字体以及插图等来自网络，若是侵权请联系删除。

毕设工坊：专注于计算机毕业设计项目的交流与资源共享平台，涵盖各类技术文档、代码示例及实战经验分享，助力学子顺利完成学业挑战: 毕设工坊：专注于计算机毕业设计项目的交流与资源共享平台，涵盖各类技术文档、代码示例及实战经验分享，助力学子顺利完成学业挑战。

【window 可视化nvm管理node版本 nvm-desktop】: 【window 可视化nvm管理node版本 nvm-desktop】

《基于YOLOv8的玉器识别系统》（包含源码、完整数据集、可视化界面、部署教程）简单部署即可运行。功能完善、操作简单，适合毕设或课程设计.zip: 资源内项目源码是来自个人的毕业设计，代码都测试ok，包含源码、数据集、可视化页面和部署说明，可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源，毕设答辩评审绝对信服的保底85分以上，放心下载使用，拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务，拿来就能用的绝对好资源！！！项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。下载后请首先打开README.txt文件，仅供学习参考, 切勿用于商业用途。

(源码)基于microbit编程语言的mymicrobit扩展插件项目.zip: # 基于microbit编程语言的mymicrobit扩展插件项目 ## 项目简介这是一个基于microbit编程语言的mymicrobit扩展插件项目。该项目旨在提供额外的功能和特性，以扩展microbit编程环境。通过此插件，用户可以轻松地在MakeCode环境中进行编程，实现对micro:bit设备的更多控制和功能实现。 ## 项目的主要特性和功能 1. 扩展性提供了丰富的积木块和代码库，允许用户轻松实现复杂的编程逻辑和功能扩展。 2. 图形化编程支持通过积木块形式的图形化编程，降低编程门槛，方便初学者快速上手。 3. 实时预览提供了积木块的实时预览功能，方便用户直观地了解代码块的逻辑和功能。 4. 与MakeCode无缝集成可以直接在MakeCode环境中导入和使用，无需额外的配置和安装。 ## 安装使用步骤

毕设单片机实战项目基于ESP8266的局域网图片刷新显示系统.zip: 【项目资源】：单片机项目适用于从基础到高级的各种项目，特别是在性能要求较高的场景中，比如操作系统开发、嵌入式编程和底层系统编程。如果您是初学者，可以从简单的控制台程序开始练习；如果是进阶开发者，可以尝试涉及硬件或网络的项目。【项目质量】：所有源码都经过严格测试，可以直接运行。功能在确认正常工作后才上传。【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担。 2. 部分字体以及插图等来自网络，若是侵权请联系删除。

《基于YOLOv8的印章分析系统》（包含源码、完整数据集、可视化界面、部署教程）简单部署即可运行。功能完善、操作简单，适合毕设或课程设计.zip: 资源内项目源码是来自个人的毕业设计，代码都测试ok，包含源码、数据集、可视化页面和部署说明，可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源，毕设答辩评审绝对信服的保底85分以上，放心下载使用，拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务，拿来就能用的绝对好资源！！！项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。下载后请首先打开README.txt文件，仅供学习参考, 切勿用于商业用途。

p111基于django的企业员工管理系统.zip: 项目资源包含：可运行源码+sql文件适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。项目具有较高的学习借鉴价值，也可拿来修改、二次开发。有任何使用上的问题，欢迎随时与博主沟通，博主看到后会第一时间及时解答。开发语言：Python 框架：django Python版本：python3.8 数据库：mysql 5.7 数据库工具：Navicat 开发软件：PyCharm 浏览器：谷歌浏览器

第三章-局域网-思维导图: 第三章-局域网-思维导图

机械工程PT300机械故障仿真测试台：高校教学与科研用精密振动分析及故障诊断实验系统了您提供的规范: 内容概要：PT300机械故障综合模拟实验台由瓦仑尼安教学设备有限公司生产，旨在帮助用户深入了解振动特征知识及复杂转子振动频谱分析，实现精密振动分析和精准故障诊断。该实验台能模拟轴承故障、不平衡、不对中、设备松动、转子摩擦等多种机械故障现象，可进行不同转速下的轴承故障频率识别、转子静动平衡模拟试验、设备启停机测试等实验。设备采用高效节能ABB三相交流电动机，配备高精度转速控制和测量模块，确保运行稳定。此外，实验台还设有透明防震安全罩和互锁开关，保障实验安全。; 适合人群：高校师生、科研人员等需要学习或研究机械故障诊断相关理论知识和实践技能的人群。; 使用场景及目标：①用于高校等教育机构的教学，辅助学生理解机械故障诊断的理论知识和实践技能；②满足科研人员进行机械故障诊断算法验证、故障特征分析等科研需求。; 其他说明：PT300机械故障综合模拟实验台的每个部件均经过高精度加工，确保在不同振动状态下稳定运行。用户可根据期望分析特定部件的故障特征。设备尺寸为735mm（长）×310mm（宽）×350mm（高），保修一年，且提供免费操作指导服务。

Android毕设实战项目基于Android+Django+sqlit3开发.zip: 【项目资源】：适用于从基础到高级的各种项目，特别是在性能要求较高的场景中，比如操作系统开发、嵌入式编程和底层系统编程。如果您是初学者，可以从简单的控制台程序开始练习；如果是进阶开发者，可以尝试涉及硬件或网络的项目。【项目质量】：所有源码都经过严格测试，可以直接运行。功能在确认正常工作后才上传。【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担。 2. 部分字体以及插图等来自网络，若是侵权请联系删除。

【光子晶体模拟】基于COMSOL弱形式PDE的三维光子晶体能带结构计算与优化：电磁场切向连续性处理及带隙分析系统设计使用COMSOL: 内容概要：本文详细介绍了使用COMSOL Multiphysics的弱形式接口对三维光子晶体进行数值模拟的方法和技巧。文章通过具体的代码示例，解释了如何构建光子晶体的介电常数分布、设置弱形式PDE、处理电磁场切向连续性、应用Floquet周期边界条件以及特征值求解等关键步骤。特别强调了弱形式接口相比传统物理场接口的优势，如灵活性和对复杂边界的处理能力。文中还分享了一些实用的经验和注意事项，如布洛赫边界条件的实现、特征值求解器参数的优化配置以及网格划分的技巧。适合人群：具备一定电磁学和数值模拟基础的研究人员或工程师，尤其是对光子晶体仿真感兴趣的读者。使用场景及目标：①理解并掌握COMSOL弱形式接口在光子晶体仿真中的应用；②学习如何通过弱形式设置处理复杂的电磁场问题；③提高对光子晶体能带结构和带隙特性的认识；④掌握特征值求解和网格划分的最佳实践。阅读建议：由于本文涉及较多的具体代码和物理概念，建议读者在阅读过程中结合COMSOL软件进行实际操作，同时查阅相关电磁理论书籍以加深理解。此外，对于文中提到的一些具体参数设置和技巧，可以通过尝试不同的配置来巩固所学知识。

(源码)基于Arduino平台的INSPTComputacion2项目.zip: # 基于Arduino平台的INSPTComputacion2项目 ## 项目简介 INSPTComputacion2是一个基于Arduino平台的开发项目。该项目旨在通过Arduino的硬件和软件能力，实现一系列计算和交互功能。通过此项目，用户可以体验到Arduino在嵌入式系统、物联网和微控制器等领域的强大功能。 ## 项目的主要特性和功能该项目的主要特性和功能包括但不限于以下几点 1. 嵌入式系统开发利用Arduino的硬件资源，开发嵌入式系统应用。 2. 物联网应用实现Arduino与物联网技术的结合，进行数据采集、传输和控制。 3. 交互设计通过Arduino实现人机交互，如按钮控制、LED显示等。 4. 数据处理利用Arduino进行数据处理和分析，如温度、湿度等环境数据的采集和处理。 ## 安装使用步骤以下是在已下载本项目源码文件后的安装使用步骤 1. 确保已安装Arduino IDE软件。

毕业设计物联网实战项目基于云且连接 Internet 的新式应用程序。可用于建立Web应用、 IoT物联网、移动后端等。.zip: 【项目资源】：物联网项目适用于从基础到高级的各种项目，特别是在性能要求较高的场景中，比如操作系统开发、嵌入式编程和底层系统编程。如果您是初学者，可以从简单的控制台程序开始练习；如果是进阶开发者，可以尝试涉及硬件或网络的项目。【项目质量】：所有源码都经过严格测试，可以直接运行。功能在确认正常工作后才上传。【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担。 2. 部分字体以及插图等来自网络，若是侵权请联系删除。

毕业设计物联网实战项目基于touchgfx，调度基于freertos.zip: 【项目资源】：物联网项目适用于从基础到高级的各种项目，特别是在性能要求较高的场景中，比如操作系统开发、嵌入式编程和底层系统编程。如果您是初学者，可以从简单的控制台程序开始练习；如果是进阶开发者，可以尝试涉及硬件或网络的项目。【项目质量】：所有源码都经过严格测试，可以直接运行。功能在确认正常工作后才上传。【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担。 2. 部分字体以及插图等来自网络，若是侵权请联系删除。

Python数据结构-学习笔记: Python数据结构-学习笔记

最近访客 更多访客>>