jQuery UI 实现email输入提示实例


Posted in Javascript onAugust 15, 2013

效果:
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" />
Javascript 相关文章推荐
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
手把手教你从零开始react+antd搭建项目
Jun 03 Javascript
javascript中如何处理引号编码&amp;#034;
Aug 15 #Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 #Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 #Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 #Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 #Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 #Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 #Javascript
You might like
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
jquery each()源代码
2011/02/14 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
Javascript中的 “&amp;” 和 “|” 详解
2017/02/02 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
vue实现图片上传功能
2020/05/28 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python下如何让web元素的生成更简单的分析
2008/07/17 Python
python解析xml文件实例分享
2013/12/04 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
Python内存映射文件读写方式
2020/04/24 Python
sklearn的predict_proba使用说明
2020/06/28 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
挑战杯创业计划书的写作指南
2014/01/07 职场文书
中秋节礼品促销方案
2014/02/02 职场文书
高中班级口号
2014/06/09 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript