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"] }); });

选项设置

Completer插件提供了丰富的选项设置和方法调用。

选项            说明            默认值        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            弹出面板的模板            "

    "        zIndex            弹出面板的css中的z-index值            1

    以上就是jQuery自动完成插件completer的使用方法,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。


    网页名称:jQuery自动完成插件completer的使用方法-创新互联
    本文网址:http://pwwzsj.com/article/dhiegh.html