jQuery自动完成插件completer的使用方法
创始人
2024-12-16 18:02:22
0次

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

    相关内容

    热门资讯

    空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
    空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
    格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
    空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
    格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
    品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
    空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
    空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
    中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
    中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...