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/
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!