DDR爱好者之家

jQuery自动完成插件completer附源码下载
站长资源 2024/11/29 佚名
73 1538
DDR爱好者之家 Design By 杰米

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

效果展示图如下所示：

jQuery自动完成插件completer附源码下载

效果展示       源码下载

HTML

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

<script src="/UploadFiles/2021-04-02/jquery.js">


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





<input type="text" id="auto-complete-email" class="form-control" placeholder="E-mail"> 





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
      弹出面板的模板
      "<ul class="completer-container"></ul>"
    
    
      zIndex
      弹出面板的css中的z-index值
      1
    
  




Completer插件提供了丰富的选项设置和方法调用。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米