Awesomplete表单数据自动填充完成

发布于 2017-06-02 字数 4878 浏览 1397 评论 0

在登录新浪的时候,当我们输入我们的用户名邮箱,当输入到@的时候,他会自动显示出一些可用的邮箱后缀,方便我们快速数据,不仅仅是邮箱后缀,在百度搜索东西的时候,同样会有这样的提示。

表单数据的自动完成可以优化我们的用户输入,可以说专为懒人设计,有些人是懒得输入完整的字符串,借助这个功能,我们可以纠正用户的错误输入,提高我们网站的用户体验。

Awesomplete是一个轻量级的自动完成插件,可以预定需要提示的文本信息,然后当用户输入到某个特定的字符串,我们就提示用户完整的词组,方便用户选择。

Awesomplete表单数据自动填充完成

默认情况下,需要用户输入两个字符,才会出现自定义提示字符串,使用Awesomplete可以轻松的完成这个功能,我们需要使用自定义数据属性预设我们需要提示的字符串。

<input class="awesomplete" data-list="Ada, Java, JavaScript, Brainfuck, LOLCODE, Node.js, Ruby on Rails" />

简单使用

在使用插件之前,你需要引入 awesomplete.cssawesomplete.js 到你的页面中:

<link rel="stylesheet" href="awesomplete.css" />
<script src="awesomplete.js" async></script>

为了实现自动完成,你需要一个输入框 <input>,然后添加 class=”awesomplete” 类,你可以通过自定义属性来预设提示的字符串,如果不是通过HTML代码,那么你就需要使用JavaScript代码来实现,这样可以有更多的设置。

有许多方法将输入链接到建议列表中。上面的简单例子也可以用下面的标记,它提供了一个很好的本地回退脚本不加载的情况下:

<input class="awesomplete" list="mylist" />
<datalist id="mylist">
    <option>Ada</option>
    <option>Java</option>
    <option>JavaScript</option>
    <option>Brainfuck</option>
    <option>LOLCODE</option>
    <option>Node.js</option>
    <option>Ruby on Rails</option>
</datalist>

或者你不想使用<datalist> 标签,也不想给代码添加ID,Awesomplete可以使用任意的标签作为输入的源:

<input class="awesomplete" data-list="#mylist" />
<ul id="mylist">
    <li>Ada</li>
    <li>Java</li>
    <li>JavaScript</li>
    <li>Brainfuck</li>
    <li>LOLCODE</li>
    <li>Node.js</li>
    <li>Ruby on Rails</li>
</ul>

或者直接在JS里面控制:

<input id="myinput" />
<ul id="mylist">
    <li>Ada</li>
    <li>Java</li>
    <li>JavaScript</li>
    <li>Brainfuck</li>
    <li>LOLCODE</li>
    <li>Node.js</li>
    <li>Ruby on Rails</li>
</ul>
var input = document.getElementById("myinput");
new Awesomplete(input, {list: "#mylist"});

我们可以为列表使用元素引用,而不是选择器:

<input id="myinput" />
<ul id="mylist">
    <li>Ada</li>
    <li>Java</li>
    <li>JavaScript</li>
    <li>Brainfuck</li>
    <li>LOLCODE</li>
    <li>Node.js</li>
    <li>Ruby on Rails</li>
</ul>
var input = document.getElementById("myinput");
new Awesomplete(input, {list: document.querySelector("#mylist")});

我们也可以直接使用字符串数组:

<input id="myinput" />
var input = document.getElementById("myinput");
new Awesomplete(input, {
    list: ["Ada", "Java", "JavaScript", "Brainfuck", "LOLCODE", "Node.js", "Ruby on Rails"]
});

我们甚至可以设置它(或覆盖它)后,它只是工作:

<input id="myinput" />
var input = document.getElementById("myinput");
var awesomplete = new Awesomplete(input);

/* ...more code... */

awesomplete.list = ["Ada", "Java", "JavaScript", "Brainfuck", "LOLCODE", "Node.js", "Ruby on Rails"];

不同的标签和价值的建议也支持。标签将显示在autocompleter和值将被插入到输入。

<input id="myinput" />
var input = document.getElementById("myinput");

// Show label but insert value into the input:
new Awesomplete(input, {
    list: [
        { label: "Belarus", value: "BY" },
        { label: "China", value: "CN" },
        { label: "United States", value: "US" }
    ]
});

// Same with arrays:
new Awesomplete(input, {
    list: [
        [ "Belarus", "BY" ],
        [ "China", "CN" ],
        [ "United States", "US" ]
    ]
});

相关链接

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!