雅星平台官网:jQuery自动完成插件completer附源码下

时间: 作者:二又

  

[jquery自动完成插件,jquery自动完成,jquery_completer]jQuery自动完成插件completer附源码下载

  

我们在表单输入的时候,如要输入邮箱之类,只需输入邮箱名前段,那么@后面的内容将自动补全,将常用的几个邮箱列出来,用户只需选择一下就可以完成表单的输入。诸如此类的还有时间的输入、域名的输入都能自动完成,这些都由插件completer来帮您实现。

  

  

效果展示图如下所示:  

  

  

  

效果展示 源码下载  

  

HTML  

  

首先载入jQuery库和插件completer.js,当然还有相关CSS样式文件,这些都在源码下载里已打包好了。

  

  
  
   
  
  

接下来我们在页面中需要放置输入框的地方放置如下代码,这是一个要求用户输入邮箱的输入表单。

  

  
  
   
  
  

Javascript  

  

直接$(element).completer()调用,非常简单,如果不想用函数调用的方式也可以在元素上使用data-toggle="completer"和data-*属性来调用插件效果。

  

  
  
  $(function(){  $("#auto-complete-email").completer({  separator: "@",  source: ["163.com", "qq.com", "126.com", "139.com", "gmail.com", "hotmail.com", "icloud.com"]  });  }); 
  
  

选项设置  

  

  

                                                                                                    
选项说明默认值
complete当输入完成时触发function() {}
itemTag弹出展示面板中的列表元素标签"li"
filter过滤函数,当输入后会先过滤相关列表内容再展示列表function(val) { return val; }
position弹出列表面板相对输入框的位置,值有"top", "right", "bottom", "left"."bottom"
source将要自动补全展示的数据[]
selectedClass当弹出面板中的选项被选中时的样式"completer-selected"
separator分隔符,将输入的内容与建议自动完成的部分分隔,如@""
suggest如果设置成true,将会进入建议suggestion模式,将自动匹配所输入的内容false
template弹出面板的模板"
    " (责任编辑:admin)

    推荐图片Related

    查看更多热门新闻
    

    首页 | js代码 | jQuery特效 | 其他代码 | 关于我们

    Copyright © 2010-2019 菲娱国际平台 版权所有

    系统要求:本站自适应各终端浏览器分辨率

    请使用Google、Firefox、IE9、百度浏览器登录网站

    网站地图 | RSS订阅 | 菲娱国际平台