仿google输入框

最新推荐文章于 2019-10-20 21:47:14 发布
最新推荐文章于 2019-10-20 21:47:14 发布
阅读量748 收藏
点赞数
分类专栏： Javascript 文章标签： google function xmlhttprequest stylesheet table callback
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hujingn/article/details/4363308
版权

---------------code.jsp------------------

<%@include file="/internet/common.jsp"%>
<link rel="stylesheet" href="/pageComponent/resources/theme/style.css" type="text/css" />

<!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.jsp?names=" + inputField.value;   //查询数据页面
                xmlHttp.open("GET", url, true);
                xmlHttp.onreadystatechange = callback;
                xmlHttp.send(null);
            }
    else
   {
                clearNames();
            }
        }

        function callback() {
            if (xmlHttp.readyState == 4) {
             alert(xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data);
                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;" οnblur="DisSelect();" οnkeyup="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="1" cellspacing="0" cellpadding="0">
 <tbody id="name_table_body"></tbody>
</table>
</div>
</body>
</html>

---------------search.jsp------------------

<%@page import="com.primeton.eos.access.*,java.sql.*"%>
<%
Connection conn = null;
ResultSet rs = null;
PreparedStatement stmt = null;

String keyword=request.getParameter("names");
if(keyword==null){
 keyword="";
}
String sql="select yr,bmmc from a_bm where yr like '%"+keyword+"%'";
System.out.println(sql);
response.setContentType("text/xml");
out.write("<?xml version="+"1.0"+" encoding="+"GB2312"+" ?>");
out.write("<response>");
out.write("<content>");
try {
 conn = DBConn.getConnection("c://test.mdb");
 stmt = conn.prepareStatement(sql);
 rs = stmt.executeQuery();
 while(rs.next()){
  System.out.println(rs.getString("bmmc"));
  out.write("<name>"+rs.getString("yr")+"</name>");
 }
}catch(Exception e){
 e.printStackTrace(); 
}finally{
 DBConn.close(rs,stmt,conn);
}
out.write("</content>");
out.write("</response>");
%>

hujingn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现 一个 类似谷歌登录的 input框
m0_48940868的博客
01-13 401
前言： 上次登录谷歌账号的时候，觉得它的输入框挺有意思的，比较好看和新颖，于是有了想实现一个的冲动， 照着它的样式，照虎画猫吧 正版ui 如下图： 盗版ui 如下图 ： 直接上代码： 【HTML】 <div class="container"> <div class="field"> <input type="text" required autocomplete="off" id="username" value="">
ASP仿Google输入框提示_自动完成功能
06-01
ASP仿Google输入框提示_自动完成功能ASP仿Google输入框提示_自动完成功能ASP仿Google输入框提示_自动完成功能ASP仿Google输入框提示_自动完成功能ASP仿Google输入框提示_自动完成功能ASP仿Google输入框提示_自动完成...
使用jquery 实现 仿google 的智能提示输入框功能 (改进版本)
veverrr的专栏
12-30 2673
在上一个版本中的仿google 智能提示输入框中存在以下缺点：1. 提示框没有明显提示说明这是一个提示框2.如果提示框中数据量较大，则全部显示出来会使提示框的Heiht 非常大3.浏览器的Cookie 会在用户鼠标进入 输入框时，自动给出之前的输入提示，在界面上与智能提示造车了冲突。为此，需要做出相应的改进：1.禁止输入框根据cookie 内容进行提示 在输入框代码中添加：autocomplete="off"2. 给智能提示框具备上下滚动条效果，为智能提示框添加边框，并制定其初始长度和高度和隐藏属性
非常好用 仿google 的输入提示框(jQuery plugin: Autocomplete)
zbmartin的博客
04-26 68
非常好用 仿google 的输入提示框(jQuery plugin: Autocomplete) 非常好用 仿google 的输入提示框(jQuery plugin: Autocomplete)   http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ 这个太好了！好多实用的功能！...
使用jquery 实现 仿google 的智能提示输入框功能
veverrr的专栏
12-27 1103
<br />在仿写OA 项目时，自己想写一个关于企业内部的信件发送模块。<br />其中，在发送信件时，需要User 在输入框中输入收件人的用户名，或者是收件部门的部门名称。即可以向单个人发送，也可向某个部门的所有人发送信件。这个模块需要提供User一个提示的功能，即用户每输入一个字符，则JSP页面会根据User输入的字符进行匹配并给出提示：<br /> <br /> <br /> 1. 用户按钮松开<br />2.获取到用户的输入字符串，并到数据库中查找到包含匹配的用户名及部门名称<br />3.将 “
仿google输入框自动完成输入源码
05-19
仿google输入框自动完成输入源码，js实现，方便使用
javascript仿百度输入框提示自动下拉补全
11-26
本文实例讲解了javascript输入框自动下拉补全操作，仿百度、谷歌搜索框提示，具体内容如下 效果图： 具体代码： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD>...
仿google输入框下载提示效果的ajax源码
05-29
仿google输入框下载提示效果的ajax源码
仿Google 自动输入框，详细注释版
11-12
仿Google 自动输入框 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <TITLE> New Document <!--//多个选择符用“，”隔开 , //--> body,div { /* 声明（主体body）、分块div样式 *...
实现输入内容提示的功能（仿google_百度输入框提示）
04-18
实现输入内容提示的功能（仿google_百度输入框提示） 具体可参见博文： http://blog.csdn.net/longteng1116/article/details/8816872#reply
CSS3 input框的实现代码类似Google登录的动画效果
11-19
用css3将input框写出类似Google登录页面的动画效果 效果一 代码如下 CSS body{ background-color:#acacac; } .form-container{ display: block; position: relative; width: 400px; height: 400px; background: #fff; margin: 50px auto; padding: 30px; } input{ display: block; position: re
html5模拟Google风格的登录框界面.rar
07-10
HTML5 CSS3 模拟谷歌网站风格的登录框界面，这个登录框界面目前Google仍在用，基于HTML5技术设计，当然也兼容IE,只是在IE下动画效果没那么好。这个登录框在鼠标点击登录框输入内容时会有提示，且带有动画效果。整体设计十分简洁明快，相信很多人会喜欢这种简洁的风格。
仿百度，谷歌输入框自动提示功能
03-22
NULL 博文链接：https://sudalyl.iteye.com/blog/1013471
仿Google页面效果完美版源码（HTML+JavaScript）
03-13
完美的仿Google页面效果，方便用户体验，还美观。用HTML+JavaScript实现，很容易调用。跟大家共享一下。
仿google、百度搜索框输入信息智能提示的实现 兼容主流浏览器
技术资料收集站
08-04 883
>   html xmlns="http://www.w3.org/1999/xhtml">   head>       title>仿google、百度搜索框输入信息智能提示的实现 兼容主流浏览器title>       style type="text/css" media="screen">           body           {               fo
纯CSS实现 Google Material Design 文本输入框风格
互相学习
10-20 1014
大家好，今天想要跟大家分享如何使用纯CSS来实现 Google Material Design 输入框的风格。 虽然今天我们有很多框架可以帮我们实现这些风格，不过通过学习在底层是如何使用纯CSS实现的原理，可以加强我们将来需要根据业务需求定制化这些框架组件的能力。 Demo请看这里 ：点我看Demo 【CodePen】 最终效果图： 仅在Chrome浏览器上面测试过。如果大家发现其他浏览器有问题...
uniapp仿微信支付密码输入框
最新发布
12-26
以下是使用uniapp实现仿微信支付密码输入框的示例代码： ```html v-for="(item, index) in inputList" :key="index" class="input-item" :class="{ 'input-item-active': index === currentIndex }" > ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值