奥门威尼斯网址jQuery实现Email邮箱地址自动补全功能代码_jquery_脚本之家

近期用nodeclub达成股票(stock卡塔尔的输加入关贸总协定组织键字自动补全证券音信举办搜寻效果,原先用jQuery-ui,结果jQuery-ui库太大,所以思考用其它插件,最后选项接纳autocomplete.js,控件轻易用着方便。留下记录

地面达成了贰个搜索框自动补全的小功效,在JQuery
UI的autocomplete插件的底蕴上,参加了自身的事务代码,贴出来回想一下,同有时间能够给大家二个参照

回想,在上个项目中,蒙受这么贰个须求,网址供给填写邮箱的时候,还向来不填写完,就可以身不由己一多级下拉列表,帮忙自动补全邮箱的效果。明日小编给给大家面无人色下我依照jquery是怎么贯彻此意义的!

正文实例呈报了jQuery完结Email邮箱地址自动补全功效代码。分享给我们供大家仿效,具体如下:

这几天手工业写了叁个下拉机关补全功用,写的粗略,只兑现了鼠标选用的效果与利益,不支持键盘选取。由于体系很多地点要用到那个效率,所以供给用心做一下。开采select2以此插件的机能能够满意当下供给。在应用jquery插件select2的进度中境遇了有些思疑,无论是穿json数据或许通过jsonp方式取多少,都能够科学再次来到。可是下拉列表中的条目款项却不能够被选中,对鼠标和键盘选用都不行。后来发掘,select2插件在贯彻选中时是以多少中的id字段为准的。所以无论是是json照旧jsonp,ajax再次来到的数额都不得不持有id字段。即使实际数据库中子虚乌有这里样的id,也得以人为布局三个,可是要担保id的唯意气风发性。此地列出模板文件try_diy.tpl的源码
在这之中colum输入框是插件作用之处,但其重临的值是id,当页面提交后大家需求把客户选拔的版块重新展现给客商,我的做法是依照表单提交的id查询相应的版面名称name,当调节器收到id值且非空的时候,把版块id对应的称谓name值同有时间表现到页面上海展览中心示出来。由于select2插件是把name名称放在构造的

源码如下:

先是贴出的是JQuery Ui
的自动补全插件部分的代码,后边的效果都是在其功底上增添的,直接拷贝到你的本土就能够直观的收看运维效果,也能够到官方网站上面体验和查阅,为了便于,小编这里是平素引进的JS链接点击下载JQuery
UI的源码

功用简述

jQuery
Email邮箱地址自动补全代码,输入Email时,会活动步向@符号,在输入框中输入“qq”、“Sina”、“163”等等可以看出功用;鼠标经过提醒Email时,高亮该条Email,鼠标点击Email时,文本框内容替换到该条Email,并删除提示层.

内层的span成分中,所以小编会在询问结果页面加载后把蒙蔽域的name值写到span元素。
复制代码 代码如下:

 

 jQuery UI Autocomplete - Default functionality      $ { var availableTags = [//这里要改成根据用户的输入,自动更换词库的形式 "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $.autocomplete({//调用补全功能 source: availableTags }); } );   Tags:   

•填写邮箱名字,现身下拉列表,自动补全邮箱

上边是调控器的例子: 复制代码 代码如下:
class pmc_try { public function diy(){ if { $fid = $_POST[‘colum’];
$fname = mod_forum::get_forum_name_by_fid;//根据id取name
pm_tpl::assign; pm_tpl::assign; pm_tpl::display; }else {
pm_tpl::display; } } public function ajax_diy(){ $fid = $_GET[‘q’];
$callback = $_GET[“callback”]; //私下认可函数名称为callback $forums =
mod_forum::get_ajx_forum_by_tpid; $total = count; $result = array(
‘total’=>$total, ‘items’=>$forums ); $output = json_encode; echo
$callback.”;//构造jonsp exit(); } } ?> model方法: 复制代码 代码如下: public static function
get_forum_name_by_fid { $sql = “SELECT name FROM sq_forums WHERE
fid=’$fid’ ORDER BY threads_counter DESC”; $data =
pm_db11::result_first; return $data; } public static function
get_ajx_forum_by_tpid { //产物ID:tpid,版块ID:fid $data =
array{//构造一个id字段,也足以因此对查询结果加工构造 $sql = “SELECT fid
AS id,fid,name FROM sq_forums WHERE tpid=’$tpid’ AND name LIKE
N’%$fid%’ ORDER BY threads_counter DESC”; $query = pm_db11::query;
$data = pm_db11::fetch_all; } return $data; }
补充一下,实际使用为非凡提醒意义,能够高亮展现name中包涵的查询关键字,这或多或少得以再select2的formatResult函数中管理,也得以在php中开展加工管理。那点的源码笔者那边就不写了。
补充参照他事他说加以考察

 

jquery-ui的机关补全功用截图

•点击上下开关,选择下拉列表邮箱

输入Email相关字符自动提示Email地址body{ margin:0px; padding:0px; font-family:Arial; font-size:12px; padding:10px;}#myemail, .newemail, .newemailtitle{ cursor:default; line-height:18px;}Email var nowid;var totalid;var can1press = false;var emailafter;var emailbefor;$.ready.focus{ //文本框获得焦点,插入Email提示层 $; $.after("<div id='myemail' style='width:170px; height:auto; background:#fff; color:#6B6B6B; position:absolute; left:"+$.offsetLeft+"px; top:"+.offsetTop+$+"px; border:1px solid #ccc;z-index:5px; '></div>"); if{ $.css; $.css.width; can1press = true; } else { $.css; can1press = false; } }).keyup{ //文本框输入文字时,显示Email提示层和常用Email var press = $; if (press!="" || press!=null){ var emailtxt = ""; var emailvar = new Array("@163.com","@126.com","@yahoo.com","@qq.com","@sina.com","@gmail.com","@hotmail.com","@foxmail.com"); totalid = emailvar.length; var emailmy = "<div class='newemail' style='width:170px; color:#6B6B6B; overflow:hidden;'><font color='#D33022'>" + press + "</font></div>"; if{ for(var i=0; i<emailvar.length; i++) { emailtxt = emailtxt + "<div class='newemail' style='width:170px; color:#6B6B6B; overflow:hidden;'><font color='#D33022'>" + press + "</font>" + emailvar[i] + "</div>" } } else { emailbefor = press.split[0]; emailafter = "@" + press.split[1]; for(var i=0; i<emailvar.length; i++) { var theemail = emailvar[i]; if(theemail.indexOf { emailtxt = emailtxt + "<div class='newemail' style='width:170px; color:#6B6B6B; overflow:hidden;'><font color='#D33022'>" + emailbefor + "</font>" + emailvar[i] + "</div>" } } } $.html; if{ $.css; $.css.width; can1press = true; } else { $.css; can1press = false; } beforepress = press; } if (press=="" || press==null){ $; $.css; } }) $.click{ //文本框失焦时删除层 if{ $; can1press = false; if{ can1press = false; } } }) $.live("mouseover",function(){ //鼠标经过提示Email时,高亮该条Email $.css; $.css("background","#CACACA"); $; nowid = $.live{ //鼠标点击Email时,文本框内容替换成该条Email,并删除提示层 var newhtml = $; newhtml = newhtml.replace; $; $; }) $.bind { if{ switch { case 38: if { $.css; $.eq.css("background","#CACACA").focus(); nowid = nowid-1; } if{ nowid = 0; $.css; $.eq.css("background","#CACACA"); $.eq; } break; case 40: if { $.css; $.eq.css("background","#CACACA").focus(); nowid = nowid+1; } if{ nowid = 0; $.css; $.eq.css("background","#CACACA"); $.eq; } break; case 13: var newhtml = $.eq; newhtml = newhtml.replace; $; $; } } })}) //检查email邮箱function isEmail{ if { return true; } else { return false; }}在输入框中输入“qq”、“Sina”、“163”等等可以看到效果

<!doctype html>
<html lang=”en-US”>
<head>
  <meta http-equiv=”Content-Type”
content=”text/html;charset=utf-8″>
  <title>Input Autocomplete Suggestions Demo</title>
  <link rel=”stylesheet” type=”text/css” media=”all”
href=”style.css”>
  <script type=”text/javascript”
src=”js/codedata.js”></script>
  <script type=”text/javascript”
src=”js/jquery-1.9.1.min.js”></script>
  <script type=”text/javascript”
src=”js/jquery.autocomplete.min.js”></script>
  <script type=”text/javascript”
src=”js/currency-autocomplete.js”></script>
</head>

下边说下自个儿扩张的有的作用及落实思路,有能够改善的地点还请指教:

•按回车键,选中列表内容,隐讳下拉列表

希望本文所述对大家jQuery程序设计具有利于。

<body>
  <div id=”w”>
    <div id=”content”>
      <h1>World Currencies Autocomplete Search</h1>
      <p>Just start typing and results will be supplied from the
JavaScript. Check out <a
href=”
Autocomplete</a> on Github.</a></p>
      
      <div id=”searchfield”>
        <form><input type=”text” name=”currency”
class=”biginput” id=”autocomplete”></form>
      </div><!– @end #searchfield –>
      
      <div id=”outputbox”>
        <p id=”outputcontent”>Choose a currency and the results
will display here.</p>
      </div>
    </div><!– @end #content –>
  </div><!– @end #w –>
</body>
</html>

1、首先,数据源要依照顾客输入的剧情实时更新.

•鼠标经过,下拉列表选项设置为高亮

 

输入框的值随着顾客的输入会一贯变动.所以,输入框下方的引入补全的内容要输入的值实行修正,这里运用onkeyup属性来监听键盘动作,并传递当时input的value值到js函数中.

•鼠标点击,选中下拉列表选项,隐蔽下拉列表

 

 //html  //js代码 function catch_keyword {//这里接受并log出value console.log; }

HTML

切切实实源码地址  

2、第2步,思虑到数据库中须求模糊检索的字段皆以华语的菜色名称.所以,当客户输入字母的时候,举办了弹指间过滤,当输入的内容中留存字母时,不交付给后台管理

HTML代码超粗略,大家就贰个大概的输入框,然后叁个ul标签,在里头能够放超级多li标签。

 //字符串判断函数 //判断一个字符串是否混有字母,全中文返回true function isChn { var reg = /^[\u4E00-\u9FA5]+$/; if  { return false; } else { return true; } }

CSS

3、开采当字符串中包括空格的时候,上面包车型客车字符串推断函数,再次回到的内容不合乎预期,然后出席了多少个删减字符串中具有空格的效应

在CSS中,定义也比较轻巧,个中有二个 lilight 的
class,能够使背景变色,通过 remove 和 add 那一个class,我们能够轻便地落到实处下拉列表成分是不是选中的界别。

 //去掉字符串中任意位置的空格,返回去除空格后的字符串 function Trim { var result; result = str.replace; if (is_global.toLowerCase { result = result.replace; } return result; }
.content input{padding:5px 10px;width:200px;}ul.list{list-style:none;padding:0px;margin:0px;overflow:hidden;}ul.list li{border:1px solid #EEE;width:180px;padding:5px 10px;margin:0px;text-overflow:ellipsis; //溢出时变为省略overflow:hidden;}.lilight{background-color:#fafafa;}

4、管理完成客户的输入后,就是交由到后台,然后回来数据源了,也正是availableTags;这里本身把availableTags注明为大局变量.而且用一块的Ajax格局取回数据,然后赋值给availableTags,然后在监听键盘的函数中,使用重返的数量调用自动补全功用.

JS

 //请求后端获取数据源 function get_source { var url = "?keyword=" + word; $.get({ type: 'GET', url: url, async: false,//改为同步 dataType: 'json', success: function  { console.log; availableTags = response; } }); }

大家引入 jQuery 来落到实处对成分的操作,达成了按钮和鼠标监听,代码如下

那边更新下最先阶的选择监听键盘后的value值的函数

${//声明所有的电子邮件变量var mail=new Array("sina.com.cn","126.com","163.com","gmail.com","qq.com","vip.qq.com","hotmail.com","sohu.com","139.com","vip.sina.com","cuiqingcai.com");//生成一个个li,并加入到ul中for(var i=0;i@"+mail[i]+"");liElement.appendTo;}//首先让list隐藏起来$;$.keyup{//键入的内容不是上下箭头和回车if(event.keyCode!=38&&event.keyCode!=40&&event.keyCode!=13){//如果输入的值不是空或者不以空格开头if!=""&& $.trim.match{$;//如果当前有已经高亮的下拉选项卡,那么将其移除if($.hasClass{$.removeClass;}//如果还存在下拉选项卡,那么将其高亮if($){$("ul.list li:visible:eq.addClass;}}else{//否则不进行显示$;$.removeClass;}//输入的内容还没有包括@符号if.match{$.text;}else{//输入的符号已经包含了@var str = $;var strs = str.split;$.text.val().length>=strs[0].length+1){tail=str.substr;$.each{//如果数组中的元素是以文本中的后缀开头,那么就显示,否则不显示if.match.text{//隐藏其他的li$;}else{//显示所在的li$;}});}}}//按了回车时,将当前选中的元素写入到文本框中if{$.val($("ul.list li.lilight:visible").text.hide;//监听上下方向键$.keydown{//下方向键按下了if{if.is{if($.nextAll{$.removeClass.addClass;}}}//下方向键按下了if{if.is{if($.prevAll{$.removeClass.addClass;//当鼠标点击某个下拉项时,选中该项,下拉列表隐藏$.click{$.text.hide;//当鼠标划过某个下拉项时,选中该项,下拉列表隐藏$.hover{$.removeClass.addClass;//当鼠标点击其他位置,下拉列表隐藏$.click{$; }); 
 //捕捉键入的关键字 function catch_keyword { if )) {//去掉空格后检查字符串,如果符合,继续请求后台 get_source.autocomplete({ source: availableTags //数据源 }); } }

总结

到此处,那个效率已经主导停止了,在测量检验进度中发觉了一个符合规律,每一回第一次得到客户输入的时候,自动补全作用尚未接触,在顾客继续输入后,才触发成功,经过调节和测量试验,作者在页面加载成功后,初步化一下机动补全插件,化解了这么些难点

实则还会有四个比较强硬的插件,叫autocomplete,同样能够完结下拉列表的机关补全,作用更是圆满,纵然我们有意思味能够去试一下。但是认为最常用的就是邮箱自动补齐,而且直接用
jQuery
就能够比较方便地促成,所以博主就从未使用autocomplete插件,而是本身写了须臾间,一来练习一下,二来对这种作用的贯彻了然得极其不可开交。

不明白咋样在markdown中加多下载链接,只能把完整代码放上来啦!

如上所述是作者给我们介绍的jQuery完成邮箱下拉列表自动补全功能,希望对我们具备助于,假如我们有任何疑问请给小编留言,我会及时恢复生机大家的。在这里也特别谢谢大家对台本之家网址的帮助!

          $ { FastClick.attach;    取消  var availableTags = [];//&#25968;&#25454;&#28304; //&#20808;&#21021;&#22987;&#21270;&#33258;&#21160;&#34917;&#20840;&#21151;&#33021; $.autocomplete({ source: availableTags //&#25968;&#25454;&#28304; }); //&#21435;&#25481;&#23383;&#31526;&#20018;&#20013;&#20219;&#24847;&#20301;&#32622;&#30340;&#31354;&#26684; function Trim { var result; result = str.replace; if (is_global.toLowerCase { result = result.replace; } return result; } //&#21028;&#26029;&#23383;&#31526;&#20018;&#26159;&#21542;&#20840;&#26159;&#20013;&#25991; function isChn { var reg = /^[\u4E00-\u9FA5]+$/; if  { return false; } else { return true; } } //&#25429;&#25417;&#38190;&#20837;&#30340;&#20851;&#38190;&#23383; function catch_keyword { if )) { get_source.autocomplete({ source: availableTags //&#25968;&#25454;&#28304; }); } } //&#35831;&#27714;&#21518;&#31471;&#33719;&#21462;&#25968;&#25454;&#28304; function get_source { var url = "&lt;&amp;#63;php echo base_url;&amp;#63;&gt;&amp;#63;keyword=" + word; $.get({ type: 'GET', url: url, async: false,//&#25913;&#20026;&#21516;&#27493; dataType: 'json', success: function  { console.log; availableTags = response; } }); }

上述便是本文的全部内容,希望对大家的读书抱有助于,也盼望大家多多指教脚本之家。

发表评论

电子邮件地址不会被公开。 必填项已用*标注