html5 自动补全,高级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文件。

HTML结构

该jquery自动补全插件可以和bootstrap集成使用，基本的HTML结构如下：

name="q"

type="search"

autocomplete="off">

初始化插件

初始化该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)

};