jQuery类似百度搜索自动补全插件 - typeahead.js

jquery.typeahead.js是一款高级的自动补全jQuery插件。该自动补全插件提供超过50个配置选项和回调方法，用于完成自动补全功能，能够完成绝大部分表单自动补全的需求。

使用方法

在页面中引入jquery、jquery.typeahead.min.js和jquery.typeahead.min.css文件。
<link rel="stylesheet" type="text/css" href="css/jquery.typeahead.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.typeahead.min.js"></script>

HTML结构
该jquery自动补全插件可以和bootstrap集成使用，基本的HTML结构如下：
<form>
    <div class="typeahead__container">
        <div class="typeahead__field">
  
            <span class="typeahead__query">
                <input class="js-typeahead"
                       name="q"
                       type="search"
                       autocomplete="off">
            </span>
            <span class="typeahead__button">
                <button type="submit">
                    <span class="typeahead__search-icon"></span>
                </button>
            </span>
  
        </div>
    </div>
</form>

初始化插件

初始化该jquery自动补全插件有两种方法：
方法一：通过$.typeahead()来初始化。（建议使用该方法）
$.typeahead({
    input: ".js-typeahead",
    order: "asc",
    source: {
        groupName: {
            // Ajax Request
            ajax: {
                url: "..."
            }
        }
    },
    callback: {
        onClickBefore: function () { ... }
    }
});         
方法二：通过唯一的input选择器来创建一个jQuery对象，然后在该对象上使用.typeahead()方法。
$('.js-typeahead').typeahead({
    order: "asc",
    source: {
        groupName: {
            // Array of Objects / Strings
            data: [ {...}, {...} ]
        }
    },
    callback: {
        onInit: function () { ... }
    }
});