Awesomplete表单数据自动填充完成

发布于 2017-06-02 17:25:44 字数 4274 浏览 2095 评论 0

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

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

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

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

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

简单使用

在使用插件之前，你需要引入 awesomplete.css 和 awesomplete.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" ]
    ]
});