模仿google suggest 下拉菜单 转 一天到晚游泳的鱼^_^ - CSDNBlog

最新推荐文章于 2022-11-19 16:00:39 发布
最新推荐文章于 2022-11-19 16:00:39 发布
阅读量246 收藏
点赞数
分类专栏： javascript 文章标签： google function xmlhttprequest table javascript callback

1.前台代码：
<%@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">
<!--
.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.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">
                    &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
%>



本文转自
http://blog.csdn.net/sandyxxx/archive/2008/02/03/2079690.aspx
cxc3214
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
google suggest(支持中文)
09-07
跟着视频做了一个项目，做了一些修改，可以支持中文
ASP模仿google suggest风格实现下拉菜单效果
10-23
在本文中，我们将探讨如何使用ASP来模仿Google Suggest风格的下拉菜单效果。Google Suggest是一种自动补全功能，当用户在搜索框中输入文本时，它会提供与输入内容匹配的相关建议。这种功能提高了用户体验，减少了...
模仿google suggest 下拉菜单
一天到晚游泳的鱼^_^
02-03 9389
1.前台代码：%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">.style1 {color: #FF0000}.mouseOut{ font-size:12px; background: #70
Google Suggest(完整实例)
cool_rain_man的专栏
03-13 1137
环境:Tomcat 5.0,JDK1.4 myEclipse5.1,Hibernate3.1,Oracle 8i.创建表的脚本:--create table.create table COD_MAIN(  ID      NUMBER not null,  CD_STYLE NUMBER(22),  CD_CODE  VARCHAR2(10),  CD_CHINA VARCHAR2(60),  C
jQuery实例：输入框下拉提示,仿google suggest
This My Life - chisj
07-19 3508
转载自：http://www.cnblogs.com/woodyy/archive/2010/02/03/1662370.html jsp页面代码：     AutoComplete--仿google_suggest   jQuery实例：输入框下拉提示，仿google suggest   后台servlet代码：
令人兴奋的Google Suggest
weixin_34273481的博客
10-11 125
好一段时间没去逛google labs，今天去的时候发现多了一个Google Suggest。 试用了一下发现又是一个好玩的东西，是提示搜索一类的东西，当你输入几个字符，google suggest便会提示你10则以所输入字符为为前缀串的热门关键字。 更令人惊叹的是，提示的速度竟然比我电脑上的单机板的金山词霸2005的提示速度还快～～～～。肯定又是一个google在ajax...
google suggest 下拉菜单实现代码(asp.net版本)
01-20
在网页开发中，谷歌建议下拉菜单是一种常见的用户输入辅助功能，它能根据用户在输入框中输入的字符动态提供相关建议，提升用户体验。以下是一个基于ASP.NET实现的谷歌建议下拉菜单的代码详解。 首先，我们需要一个...
Google Suggest ;-) 基于js的动态下拉菜单
12-03
Google Suggest 是一个基于JavaScript实现的动态下拉菜单功能，它在用户输入关键词时提供实时的搜索建议。这一功能的核心原理是利用JavaScript在当前网页中创建一个iframe元素。这个iframe用于显示与用户输入相关的...
学生信息显示，翻页显示&Google Suggest
最新发布
weixin_52360960的博客
11-19 233
servlet+bean+DAO实现翻页显示信息，利用ajax实现Google Suggest
google suggest 的实现
04-13
google suggest 的实现,google suggest 的实现
ajax自动完成 搜索提示(类似google) suggest
07-03
该脚本功能很强大，类似google的自动完成。 使用了cache 功能，当敲入的字符数可以在cache中查到时，将不会向服务器发送请求。减轻服务器压力 使用空格匹配，一个空格字符相当于1个或多个字符（串），可以自己写简单的正则，加入属性，默认的spaceMatchRg为"\.\{1,}" 无论输入字符串在dataSource的何处，始终匹配 当数据量较大时，自动截取前部分的数据，提高效率 忽略大小写 开启方向键（小键盘）
google suggest的实现
zhaozhijun1988的专栏
01-01 2193
自己想实现一个google suggest，以下是参考以为牛人的文章，加了一些自己的东西终于调通啦，以为是源码，希望对大家有所帮助，后台传回的为json的字符串，大体思路为：文本框监听键盘事件、触发事件、提取参数、根据文本框的位置创建div，向后退发起请求，后台发挥数据，前台解析，生成列表，这里面是table，再把table写到创建的div中，接着是监听用户键盘或鼠标事件，给文本框赋值，这里有个问
实现google suggest技术过程总结
sgear
04-19 1412
实现google suggest技术过程总结 Posted on 2006-07-17 10:49 慕容一刀 阅读(407) 评论(6)  编辑 收藏 引用 网摘 所属分类: ASP.NET之控件篇 <!--<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"xmlns:dc="http://purl
ajax+js 实现 google suggest
yangzhibin1986的专栏
03-12 715
    pageEncoding="GB18030"%>         酒店信息搜索    /dqbb/JS">         var language="";     var num=-1;  var mm=0;     function go(){   (new DqbbFactory()).dqbbCall("ajax.check",[document.getElementById(c
关于Google的Suggest功能的实现
cool_rain_man的专栏
03-13 1112
大家都对Google的suggest的功能大概很有兴趣吧，我们觉得既然Google做的出，那么我们也能做出来，先对其进行分析，1.对于网页客户端的按键的动态变化，Ajax是最好的选择， 2.如果数据库的选择，则可以有多种选择得，BerkeleyDB, Derby甚至自己做个txt文本文件，把所需要的单词和result数目放在文本文件里都能够实现，但今天我们有了一个很好的索引工具Lucene。加
suggest插件实现下拉选择筛选
weixin_30535167的博客
07-27 565
实现的效果展示： 代码如下： 1.需要引入jquery,bootstrap-suggest.js,bootstrap.min.css 2.html页面代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link href="__CCSS__/bootstrap.min.css...
bootstrap suggest 前端输入框下拉提示、搜索建议插件
小楼一夜听春雨
08-25 6064
http://www.open-open.com/lib/view/open1415932442211.html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值