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 相关文章推荐
JS取文本框中最小值的简单实例
Nov 29 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
微信小程序保存图片到相册权限设置
Apr 09 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
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
15种PHP Encoder的比较
2007/03/06 PHP
php异常处理使用示例
2014/02/25 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
家居设计专业个人自荐信范文
2013/11/26 职场文书
旅游专业职业生涯规划范文
2014/01/13 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
销售个人求职信范文
2014/04/28 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
小学元宵节活动总结
2015/02/06 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
公司周年庆寄语
2019/06/21 职场文书
PyTorch device与cuda.device用法
2022/04/03 Python
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android