表单/表格

高级jQuery自动补全插件

也想出现在这里?联系我们
创客云

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

使用方法

在页面中引入 jquery、jquery.typeahead.min.js 和 jquery.typeahead.min.css 文件。

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" type="text/css" href="css/jquery.typeahead.min.css" />
  2. <script src="js/jquery.min.js"></script>
  3. <script src="js/jquery.typeahead.min.js"></script>

HTML 结构

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

  1. <form>
  2.     <div class="typeahead__container">
  3.         <div class="typeahead__field">
  4.  
  5.             <span class="typeahead__query">
  6.                 <input class="js-typeahead"
  7.                        name="q"
  8.                        type="search"
  9.                        autocomplete="off">
  10.             </span>
  11.             <span class="typeahead__button">
  12.                 <button type="submit">
  13.                     <span class="typeahead__search-icon"></span>
  14.                 </button>
  15.             </span>
  16.  
  17.         </div>
  18.     </div>
  19. </form>

初始化插件

初始化该 jquery 自动补全插件有两种方法:
方法一:通过$.typeahead()来初始化。(建议使用该方法)

  1. $.typeahead({
  2.     input: ".js-typeahead",
  3.     order: "asc",
  4.     source: {
  5.         groupName: {
  6.             // Ajax Request
  7.             ajax: {
  8.                 url: "..."
  9.             }
  10.         }
  11.     },
  12.     callback: {
  13.         onClickBefore: function () { ... }
  14.     }
  15. });

方法二:通过唯一的 input 选择器来创建一个 jQuery 对象,然后在该对象上使用.typeahead()方法。

  1. $('.js-typeahead').typeahead({
  2.     order: "asc",
  3.     source: {
  4.         groupName: {
  5.             // Array of Objects / Strings
  6.             data: [ {...}, {...} ]
  7.         }
  8.     },
  9.     callback: {
  10.         onInit: function () { ... }
  11.     }
  12. });

配置参数

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

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

官方网站:http://www.runningcoder.org/jquerytypeahead/documentation/

资源下载此资源下载价格为1立即购买,VIP 免费

演示地址 下载地址
收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表评论

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

请扫码添加QQ好友后咨询!