jQuery UI 实现email输入提示实例

效果：
 


代码如下:

使用了Jquery UI ,要导入的js和css:
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<link rel="stylesheet" href="../demos.css">
<script src="../../jquery-1.7.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.autocomplete.js"></script>

<script>
var emails=["163.com","yahoo.com","yahoo.cn","126.com","sina.com"];
$( function () {
//为输入框绑定事件
$( "#email" ).keyup( function(){
emailiInp();
});
});
function emailiInp(){
var arrs= new Array()
inpVal=$( "#email" ).val();
//根据输入的值，动态的创建下拉列表
$.each(emails, function (index,info){
if (inpVal.indexOf("@" )==-1)
{
//没有输入@
arrs[index]=inpVal+ "@" +info;
} else {
//输入@
arrs[index]=inpVal.substring(0,inpVal.indexOf( "@" ))+"@" +info;
}
})
$( "#email" ).autocomplete({
//绑定下拉列表内容
source: arrs
});
}
</script>
最后再来个文本框：
<input id="email" />

赞 (0)

相关推荐

  • jquery validate添加自定义验证规则(验证邮箱 邮政编码)

    jQuery:validate添加自定义验证 jQuery.validator.addMethod添加自定义的验证规则 addMethod:name, method, message 简单实例:单个验证的添加 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q

  • jquery使用正则表达式验证email地址的方法

    本文实例讲述了jquery使用正则表达式验证email地址的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jquery使用正则表达式验证email地址</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type=&qu

  • jquery验证手机号码、邮箱格式是否正确示例代码

    复制代码 代码如下: //jquery验证邮箱 function checkSubmitEmail() { if ($("#email").val() == "") { //$("#confirmMsg").html("<font color='red'>邮箱地址不能为空!</font>"); alert("邮箱不能为空!") $("#email").focus(

  • jQuery实现Email邮箱地址自动补全功能代码

    jQuery实现Email邮箱地址自动补全功能代码

    本文实例讲述了jQuery实现Email邮箱地址自动补全功能代码.分享给大家供大家参考,具体如下: jQuery Email邮箱地址自动补全代码,输入Email时,会自动加入@符号,在输入框中输入"qq"."Sina"."163"等等可以看到效果:鼠标经过提示Email时,高亮该条Email,鼠标点击Email时,文本框内容替换成该条Email,并删除提示层. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js

  • jquery实现邮箱自动补全功能示例分享

    复制代码 代码如下: (function($){    $.fn.autoMail = function(options){         var autoMail = $(this);         var _value   = '';         var _index   = -1;         var _width   = autoMail.outerWidth();         var _height  = autoMail.outerHeight();        

  • jQuery 实现自动填充邮箱功能（带下拉提示）

    jQuery 实现自动填充邮箱功能（带下拉提示）

    在做这个功能时候,我参考的是网易注册(http://reg.163.com/reg/reg.jsp?product=urs)中的邮箱栏目所实现的功能与效果.这个功能的目的是使用户在填写邮箱栏目的过程中,在带有邮箱后缀名的菜单的提示下,可以不需要完整输入自己的注册邮箱,达到方便.快捷.友好的效果.在做这个功能的时候,需要充分站在使用者的角度,看怎样设计能够最符合通常情况下人们的使用习惯,又怎样设计反而会让用户感到不便.先来看看功能实现的演示效果图: 在线演示:http://jsfiddle.net

  • jQuery实现的Email中的收件人效果（按del键删除）

    除以下代码外,再导入个jquery-1.4.4.min.js文件 ,代码中收件人是写死的("ABC", "ABCDEF", "BCDEF"),已测试通过! 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageencoding="utf-8" %> <!DOCTYPE HTML PUBLIC "

  • jquery validation验证身份证号,护照,电话号码,email(实例代码)

    validata.htm 复制代码 代码如下: <!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"><head><meta http

  • jquery 实现输入邮箱时自动补全下拉提示功能

    记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能. 实现效果如图所示: 核心代码(需要jquery的支持): (function($){ $.fn.mailAutoComplete = function(options){ var defaults = { boxClass: "

  • jQuery UI 实现email输入提示实例

    jQuery UI 实现email输入提示实例

    效果:   复制代码 代码如下: 使用了Jquery UI ,要导入的js和css: <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> <link rel="stylesheet" href="../demos.css"> <script src="../../jquery-1.7.2.js"&

  • jQuery UI Draggable + Sortable 结合使用(实例讲解)

    jQuery UI Draggable + Sortable 结合使用(实例讲解)

    工作中需要将一个左边的设计好的控件,拖拽到右边的面板中,同时保持右边面板中的控件自由排序,这时候就需要及支持拖拽又支持排序的操作了, Demo截图:从左边控件拖到右边区域 代码段: <script type="text/javascript"> $(function () { $("#box_wrap1,#box_wrap2").sortable({ connectWith: ".box_wrap", helper: "cl

  • jQuery UI Dialog 创建友好的弹出对话框实现代码

    主要参数 jQuery UI Dialog常用的参数有: 1.autoOpen:默认true,即dialog方法创建就显示对话框 2.buttons:默认无,用于设置显示的按钮,可以是JSON和Array形式: {"确定":function(){},"取消":function(){}} [{text:"确定", click: function(){}},{text:"取消",click:function(){}}] 3.mod

  • jQuery实现手机号码输入提示功能实例

    本文实例讲述了jQuery实现手机号码输入提示功能的方法.分享给大家供大家参考.具体实现方法如下: <!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"&g

  • jquery实现表单输入时提示文字滑动向上效果

    jquery实现表单输入时提示文字滑动向上效果

    本文实例讲述了jquery实现表单输入时提示文字滑动向上效果.分享给大家供大家参考.具体如下: 这里基于jQuery实现的表单输入框提示效果,当不输入的时候,提示文字就显示在输入框中,当鼠标点击文本框要输入文字的时候,提示文字向滑出输入框,好像很个性也很智能的样子,用户体验比较不错,运用了CSS3的部分属性,因此在测试时,请尽量要用高版本的IE9或chrome和火狐等网页浏览器. 运行效果截图如下: 具体代码如下: <!doctype html> <html> <head&g

  • PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能

    PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能

    我们在很多项目中使用了搜索功能来帮助用户更快更准确的找到想要的信息.本文将介绍如何实现用户输入自动提示的功能,就像谷歌百度搜索引擎一样,当用户输入关键字时,输入框下方会有提示,将与关键字相关的信息展现出来供用户选择,提升了用户体验. 本文将使用jquery ui的autocomplete插件,结合后端PHP,数据源通过PHP读取mysql数据表的数据. XHTML 首先将jquery库和相关ui插件,以及css导入. 复制代码 代码如下: <link rel="stylesheet&quo

  • jquery ui dialog替代confirm实例分析

    本文实例讲述了jquery ui dialog替代confirm的方法.分享给大家供大家参考,具体如下: js的confirm,有的浏览器会直接屏蔽掉,导致功能无法使用,推荐使用jquery ui 的dialog功能,完美替换confirm功能 1.html代码 <div id="confirm_dialog" title="提示" style="display:none;"> </div> 把上面代码放到公用的地方 2.

  • 详解jQuery UI库中文本输入自动补全功能的用法

    自动补全(autocomplete),是一个可以减少用户输入完整信息的UI 工具.一般在 输入邮箱.搜索关键字等,然后提取出相应完整字符串供用户选择. 一．调用autocomplete()方法 $('#email').autocomplete({ source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'], }); 二．修改autocomplete()样式    由于autocomplete()方法是弹窗,然后鼠标悬停的样式.通过Firebug

  • jQuery UI 实例讲解 - 日期选择器(Datepicker)

    默认功能 日期选择器(Datepicker)绑定到一个标准的表单 input 字段上.把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历.选择一个日期,点击页面上的任意地方(输入框即失去焦点),或者点击 Esc 键来关闭.如果选择了一个日期,则反馈显示为 input 的值. <!doctype html> <html lang="en"> <head> <meta charset="utf-8&

  • firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法

    找到以下代码: 复制代码 代码如下: .bind( "blur.autocomplete", function( event ) {                if ( self.options.disabled ) {                    return;                } clearTimeout( self.searching );                // clicks on the menu (or a button to tri

随机推荐