jQuery UI 實(shí)現(xiàn)email輸入提示實(shí)例

更新時(shí)間：2013年08月15日 16:29:27 作者：

本文為大家介紹下使用jQuery UI 實(shí)現(xiàn)email輸入提示，具體思路如下，感興趣的朋友可以參考下

效果：

 
使用了Jquery UI ,要導(dǎo)入的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(); 
//根據(jù)輸入的值，動(dòng)態(tài)的創(chuàng)建下拉列表 
$.each(emails, function (index,info){ 
if (inpVal.indexOf("@" )==-1) 
{ 
//沒有輸入@ 
arrs[index]=inpVal+ "@" +info; 
} else { 
//輸入@ 
arrs[index]=inpVal.substring(0,inpVal.indexOf( "@" ))+"@" +info; 
} 
}) 
$( "#email" ).autocomplete({ 
//綁定下拉列表內(nèi)容 
source: arrs 
}); 
} 
</script> 
最后再來個(gè)文本框： 
<input id="email" /> 

您可能感興趣的文章:

相關(guān)文章

jQuery通過ajax快速批量提交表單數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了jQuery通過ajax快速批量提交表單數(shù)據(jù)的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
Jquery寫一個(gè)鼠標(biāo)拖動(dòng)效果實(shí)現(xiàn)原理與代碼
近日項(xiàng)目中要做一個(gè)鼠標(biāo)拖拽層的效果，于是手動(dòng)使用Jquery做了一個(gè)，發(fā)出來跟大伙兒分享一下，并希望能得到高手的指點(diǎn),如何有高手改進(jìn)的話，在下不勝感激
2012-12-12
ajax 文件上傳應(yīng)用簡(jiǎn)單實(shí)現(xiàn)
今天看到一個(gè)jquery插件jquery.fileupload.v.1.5.0，自己試著結(jié)合java做了一個(gè)ajax的文件上傳小應(yīng)用
2009-03-03
jQuery中:checked選擇器用法實(shí)例
這篇文章主要介紹了jQuery中:checked選擇器用法,實(shí)例分析了:checked選擇器的功能、定義及選取選中的復(fù)選框或單選按鈕時(shí)的使用技巧,需要的朋友可以參考下
2015-01-01
基于jquery1.4.2的仿flash超炫焦點(diǎn)圖播放效果
有了jquery一切變的如此簡(jiǎn)單！讓js做的動(dòng)畫更有動(dòng)感。
2010-04-04
JQuery 實(shí)現(xiàn)的頁面滾動(dòng)時(shí)浮動(dòng)窗口控件
JQuery 實(shí)現(xiàn)的頁面滾動(dòng)時(shí)浮動(dòng)窗口控件實(shí)現(xiàn)代碼，大家可以參考下。
2009-07-07
一款基jquery超炫的動(dòng)畫導(dǎo)航菜單可響應(yīng)單擊事件
。這款導(dǎo)航菜單，初始時(shí)頁面中間一個(gè)按鈕，單擊按鈕，菜單從左側(cè)飛入頁中。再次單擊按鈕，導(dǎo)航飛入左側(cè)消息
2014-11-11
基于jQuery實(shí)現(xiàn)仿百度首頁換膚背景圖片切換代碼
現(xiàn)在介紹網(wǎng)頁換膚的例子已經(jīng)數(shù)不勝數(shù)，自己也沒有仔細(xì)研究過，剛搞遇到類似這個(gè)問題，網(wǎng)上查了資料解決了問題，感覺很有用，就記錄了下來，本文給大家分享基于jQuery實(shí)現(xiàn)仿百度首頁換膚背景圖片切換代碼，需要的朋友可以參考下
2015-08-08
JQuery頁面隨滾動(dòng)條動(dòng)態(tài)加載效果的簡(jiǎn)單實(shí)現(xiàn)(推薦)
下面小編就為大家?guī)硪黄狫Query頁面隨滾動(dòng)條動(dòng)態(tài)加載效果的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-02-02
在JavaScript的jQuery庫(kù)中操作AJAX的方法講解
這篇文章主要介紹了在JavaScript的jQuery庫(kù)中操作AJAX的方法講解,包括利用jQuery簡(jiǎn)化Ajax開發(fā)部分的內(nèi)容,需要的朋友可以參考下
2015-08-08