高级jQuery自动补全插件

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

安装

可以通过npm或bower来安装jquery.typeahead.js插件。

bower install jquery-typeahead
npm install jquery-typeahead                  
                

使用方法

在页面中引入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 () { ... }
    }
});                  
                

配置参数

该jquery自动补全插件的可用配置参数如下：

/**
 * @private
 * Default options
 */
var _options = {
    input: null,            // *RECOMMENDED*, jQuery selector to reach Typeahead's input for initialization
    minLength: 2,           // Accepts 0 to search on focus, minimum character length to perform a search
    maxLength: false,       // False as "Infinity" will not put character length restriction for searching results
    maxItem: 8,             // Accepts 0 / false as "Infinity" meaning all the results will be displayed
    dynamic: false,         // When true, Typeahead will get a new dataset from the source option on every key press
    delay: 300,             // delay in ms when dynamic option is set to true
    order: null,            // "asc" or "desc" to sort results
    offset: false,          // Set to true to match items starting from their first character
    hint: false,            // Added support for excessive "space" characters
    accent: false,          // Will allow to type accent and give letter equivalent results, also can define a custom replacement object
    highlight: true,        // Added "any" to highlight any word in the template, by default true will only highlight display keys
    group: false,           // Improved feature, Boolean,string,object(key, template (string, function))
    groupOrder: null,       // New feature, order groups "asc", "desc", Array, Function
    maxItemPerGroup: null,  // Maximum number of result per Group
    dropdownFilter: false,  // Take group options string and create a dropdown filter
    dynamicFilter: null,    // Filter the typeahead results based on dynamic value, Ex: Players based on TeamID
    backdrop: false,        // Add a backdrop behind Typeahead results
    backdropOnFocus: false, // Display the backdrop option as the Typeahead input is :focused
    cache: false,           // Improved option, true OR 'localStorage' OR 'sessionStorage'
    ttl: 3600000,           // Cache time to live in ms
    compression: false,     // Requires LZString library
    searchOnFocus: false,   // Display search results on input focus
    blurOnTab: true,        // Blur Typeahead when Tab key is pressed, if false Tab will go though search results
    resultContainer: null,  // List the results inside any container string or jQuery object
    generateOnLoad: null,   // Forces the source to be generated on page load even if the input is not focused!
    mustSelectItem: false,  // The submit function only gets called if an item is selected
    href: null,             // String or Function to format the url for right-click & open in new tab on link results
    display: ["display"],   // Allows search in multiple item keys ["display1", "display2"]
    template: null,         // Display template of each of the result list
    templateValue: null,    // Set the input value template when an item is clicked
    groupTemplate: null,    // Set a custom template for the groups
    correlativeTemplate: false, // Compile display keys, enables multiple key search from the template string
    emptyTemplate: false,   // Display an empty template if no result
    cancelButton: true,     // If text is detected in the input, a cancel button will be available to reset the input (pressing ESC also cancels)
    loadingAnimation: true, // Display a loading animation when typeahead is doing request / searching for results
    filter: true,           // Set to false or function to bypass Typeahead filtering. WARNING: accent, correlativeTemplate, offset & matcher will not be interpreted
    matcher: null,          // Add an extra filtering function after the typeahead functions
    source: null,           // Source of data for Typeahead to filter
    callback: {
        onInit: null,               // When Typeahead is first initialized (happens only once)
        onReady: null,              // When the Typeahead initial preparation is completed
        onShowLayout: null,         // Called when the layout is shown
        onHideLayout: null,         // Called when the layout is hidden
        onSearch: null,             // When data is being fetched & analyzed to give search results
        onResult: null,             // When the result container is displayed
        onLayoutBuiltBefore: null,  // When the result HTML is build, modify it before it get showed
        onLayoutBuiltAfter: null,   // Modify the dom right after the results gets inserted in the result container
        onNavigateBefore: null,     // When a key is pressed to navigate the results, before the navigation happens
        onNavigateAfter: null,      // When a key is pressed to navigate the results
        onMouseEnter: null,         // When the mouse enter an item in the result list
        onMouseLeave: null,         // When the mouse leaves an item in the result list
        onClickBefore: null,        // Possibility to e.preventDefault() to prevent the Typeahead behaviors
        onClickAfter: null,         // Happens after the default clicked behaviors has been executed
        onDropdownFilter: null,     // When the dropdownFilter is changed, trigger this callback
        onSendRequest: null,        // Gets called when the Ajax request(s) are sent
        onReceiveRequest: null,     // Gets called when the Ajax request(s) are all received
        onPopulateSource: null,     // Perform operation on the source data before it gets in Typeahead data
        onCacheSave: null,          // Perform operation on the source data before it gets in Typeahead cache
        onSubmit: null,             // When Typeahead form is submitted
        onCancel: null              // Triggered if the typeahead had text inside and is cleared
    },
    selector: {
        container: "typeahead__container",
        result: "typeahead__result",
        list: "typeahead__list",
        group: "typeahead__group",
        item: "typeahead__item",
        empty: "typeahead__empty",
        display: "typeahead__display",
        query: "typeahead__query",
        filter: "typeahead__filter",
        filterButton: "typeahead__filter-button",
        dropdown: "typeahead__dropdown",
        dropdownItem: "typeahead__dropdown-item",
        button: "typeahead__button",
        backdrop: "typeahead__backdrop",
        hint: "typeahead__hint",
        cancelButton: "typeahead__cancel-button"
    },
    debug: false                    // Display debug information (RECOMMENDED for dev environment)
};                  
                

更多关于jquery.typeahead.js自动补全插件的信息，可以参考官方网站：http://www.runningcoder.org/jquerytypeahead/documentation/