实用的轻量级js自动完成autocomplete插件

Awesomplete是一款实用的轻量级js自动完成autocomplete插件。它的特点有：轻量级、高度可定制、简单易用、无外部依赖等。该js自动完成autocomplete插件支持HTML5的<datalist>属性，该属性只有现代浏览器才支持。

使用方法

要使用该自动完成autocomplete插件，首先需要在页面中引入awesomplete.css和awesomplete.js文件：

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

该自动完成autocomplete插件的html结构只需要一个<input>元素（也许可以工作在有contentEditable属性的元素，如<textarea>上，但未经测试）。为<input>元素添加classawesomplete，在data-list中填写你想要自动提示的字符串，逗号隔开。你也可以通过js代码来初始化它。

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

使用datalist

可以有多种方式来将一组选项与<input>元素联系起来完成自动提示功能。上面的例子也可以使用下面的方法来编写，下面的写法会在js脚本没有被加载的时候提供一个完美的回退：

<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>，可以使用下面的无序列表：

<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来初始化

可以使用下面的方法来使用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"});                    
                

或者使用一个选择器来引用列表元素：

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

甚至可以在初始化之后再设置（或覆盖）这个数组：

var input = document.getElementById("myinput");
var awesomplete = new Awesomplete(input);

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

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

配置参数

下面所有的参数都可以通过在<input>元素中使用data-属性来实现。如果你在<input>元素设置了data-minchars属性，又在js代码中设置了minChars选项，将以HTML属性优先。你可以使用js选项来在自动完成插件被初始化后改变它的配置，这时，即使是HTML属性也会被改变。

扩展

下面的js选项没有对应的HTML属性，因为它们的值是函数。它们允许你在Awesomplete工作时改变设置的属性：

事件

为避免冲突，所有的事件都使用awesomplete-前缀。

API

下面是Awesomplete的一些可用方法：