<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入Email相关字符自动提示Email地址</title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
        body
        {
            margin:0px;
            padding:0px;
            font-family:Arial;
            font-size:12px;
            padding:10px;
        }
    </style>
</head>
<body>
Email <input id="me" type="text" value="" style="width:150px; height:18px; line-height:18px; border:1px solid #999;">
<script type="text/javascript">
    var can1press = false;
    $(function(){
        $("#me").focus(function(){ //文本框获得焦点，插入Email提示层
            $("#myemail").remove();
            $(this).after("<div id='myemail' style='width:170px; height:auto; background:#fff; color:#6B6B6B; position:absolute; left:"+$(this).get(0).offsetLeft+"px; top:"+($(this).get(0).offsetTop+$(this).height()+2)+"px; border:1px solid #ccc;z-index:5px; '></div>");
            if($("#me").html()){
                $("#myemail").css("display","block");
                $(".newemail").css("width",$("#myemail").width());
                can1press = true;
            } else {
                $("#myemail").css("display","none");
                can1press = false;
            }
        }).keyup(function(){ //文本框输入文字时，显示Email提示层和常用Email
            var press = $("#me").val();
            if (press!="" || press!=null){
                var emailtxt = "";
                var emailvar = ["用户名","部门名称","真实姓名"];
                for(var i=0; i<emailvar.length; i++) {
                    emailtxt = emailtxt + "<div class='newemail' onclick='getT("+ i +")' style='width:170px; color:#6B6B6B; overflow:hidden;'><span color='#D33022'>" + press + "</span>" + emailvar[i] + "</div>"
                }
                $("#myemail").html(emailtxt);
                if($("#myemail").html()){
                    $("#myemail").css("display","block");
                    $(".newemail").css("width",$("#myemail").width());
                    can1press = true;
                } else {
                    $("#myemail").css("display","none");
                    can1press = false;
                }
                //beforepress = press;
            }
            if (press=="" || press==null){
                $("#myemail").html("");
                $("#myemail").css("display","none");
            }
        })
        $(document).click(function(){ //文本框失焦时删除层
            if(can1press){
                $("#myemail").remove();
                can1press = false;
                if($("#me").focus()){
                    can1press = false;
                }
            }
        })
    })
    function getT(obj) {
        console.log(855);
        console.log(obj);
    }
</script>
</body>
</html>

仿造email后缀搜索功能（2）的更多相关文章

  1. 仿造email后缀自动添加功能（1）

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. Postgres全文搜索功能

    当构建一个Web应用时,经常被要求加上搜索功能.其实有时候我们也不知道我要搜索个啥,反正就是要有这个功能.搜索确实很重要的特性,这也是为什么像Elasticsearch和Solr这样基于Lucene的 ...

  3. 【Lucene3.6.2入门系列】第03节_简述Lucene中常见的搜索功能

    package com.jadyer.lucene; import java.io.File; import java.io.IOException; import java.text.SimpleD ...

  4. 第三百六十九节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索功能

    第三百六十九节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索功能 Django实现搜索功能 1.在Django配置搜索结果页的路由映 ...

  5. ElasticSearch（五）：简单的ElasticSearch搜索功能

    这里主要是一些简单的ElasticSearch的搜索功能,复杂的搜索,比如过滤,聚合等以后单独在写 1. 搜索全部 GET book/_search 直接搜索全部,下面是对搜索结果的详细介绍:默认情况 ...

  6. 四十八 Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索功能

    Django实现搜索功能 1.在Django配置搜索结果页的路由映射 """pachong URL Configuration The `urlpatterns` lis ...

  7. （转）淘淘商城系列——商品搜索功能Service实现

    http://blog.csdn.net/column/details/15737.html 首先我们在taotao-search-interface工程中新建一个SearchService接口,并在 ...

  8. Android搜索功能的案例，本地保存搜索历史记录......

    开发的APP有一个搜索功能,并且需要显示搜索的历史记录,我闲暇之余帮她开发了这个功能,现把该页面抽取成一个demo分享给大家. 实现效果如图所示:  本案例实现起来很简单,所以可以直接拿来嵌入项目中使 ...

  9. Yii 1开发日记 -- 搜索功能及Checkbox的实现

    用yii 1实现后台的搜索功能,效果如下图: 1.模型中: public function search() { $criteria = new CDbCriteria; //独立高级搜索 if(is ...

随机推荐

  1. RN中webview的一些思考

    刚开始只是对接一下RN,h5部分,嵌套在RN里的webview里需要隐藏一些原生的按钮,遇到很多沟通上的问题,本来没使用RN之前,也是嵌套在webview里,也没什么问题,突然RN嵌套就有问题了,对方 ...

  2. LC 652. Find Duplicate Subtrees

    Given a binary tree, return all duplicate subtrees. For each kind of duplicate subtrees, you only ne ...

  3. Vue avoid mutating a prop directly since the value will be overwritten

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. vue路由在keep-alive下的刷新问题 对watch的影响

    转载自:https://www.cnblogs.com/dansingal/p/8302100.html 问题描述: 在keep-alive中的在跳转到指定的路由时刷新对应的路由,其余不刷新. 1 2 ...

  5. -moz-box-shadow

    css的box-shadow是用来添加边框阴影效果的. 属性值详解: 1.inset可选值,默认阴影在盒子外使用inset后,阴影在盒子内,即使指定边框或者透明边框,阴影依然存在. 2.<off ...

  6. Web jsp开发学习——终极解决jsp中request和response中文乱码的问题（加个过滤器）

    中文乱码真的很烦人的.而且每次都要写,可麻烦了,而且有时候写了还不一定管用,所以我们可以试试过滤器 1.每个jsp头上当然要写上utf8啦 <%@ page language="jav ...

  7. Redis 高级应用

    Redis SAVE 命令用于创建当前数据库的备份 该命令将在 redis 安装目录中创建dump.rdb文件. 如果需要恢复数据,只需将备份文件 (dump.rdb) 移动到 redis 安装目录并 ...

  8. django helloworld

    http://note.youdao.com/noteshare?id=8f0b036922e71c1feb5d0d06a4779c6f

  9. C# WPF Border控件总结

    Border控件不是一个布局面板,而是一个非常便于使用的元素,经常与布局面板一起使用.所以,在继续介绍其他布局面板之前,现在先介绍一下Border控件是有意义的. Border类非常简单.它只能包含一 ...

  10. 使用PowerShell 将用户添加至用户组

    执行环境:Windows Server 2012 R2 语法 net localgroup 用户组名称 用户名 /add eg. net localgroup administrators myboo ...