阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.typeahead 中文API文档

      插件 jQuery.typeahead 中文API文档

      源码 & 下载

      适用场景

      插件特点

      Javascript Typeahead(自动完成)插件,包含50多个选项和回调。

      jQuery Typeahead插件提供搜索输入的自动完成预览,类似于谷歌搜索,内置选项和深度自定义。它是一个简单的客户端库,可以改善您的网站搜索输入的用户体验!

      基本用法

      需要jQuery

      • jQuery 1.7.2及更高版本,因为.on事件处理程序
      <html>
      <head>
          ...
          <!-- Optional CSS -->
          <link rel="stylesheet" href="/vendor/jquery-typeahead/dist/jquery.typeahead.min.css">
       
          <!-- Required JavaScript -->
          <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
          <script src="/vendor/jquery-typeahead/dist/jquery.typeahead.min.js"></script>
          ...
      </head>
      

      初始化

      有两种方法可以初始化预先搜索:

      $.typeahead()使用input配置选项调用该功能[ 推荐]

      $.typeahead({
          input: ".js-typeahead",
          order: "asc",
          source: {
              groupName: {
                  // Ajax Request
                  ajax: {
                      url: "..."
                  }
              }
          },
          callback: {
              onClickBefore: function () { ... }
          }
      });
      

      使用唯一的输入选择器创建jQuery对象。然后将.typeahead()包含参数的函数链接为对象。

      $('.js-typeahead').typeahead({
          order: "asc",
          source: {
              groupName: {
                  // Array of Objects / Strings
                  data: [ {...}, {...} ]
              }
          },
          callback: {
              onInit: function () { ... }
          }
      });
      

      HTML结构和CSS

      Typeahead插件需要特定的HTML结构。这提供了一些优点:

      • 轻松的HTML集成
      • 默认样式使用 /dist/jquery.typeahead.min.css
      • Bootstrap 3和4准备就绪
      • *自2.5.0起,Typeahead使用BEM css标准
      <form>
          <div class="typeahead__container">
              <div class="typeahead__field">
                  <div class="typeahead__query">
                      <input class="js-typeahead"
                             name="q"
                             type="search"
                             autocomplete="off">
                  </div>
                  <div class="typeahead__button">
                      <button type="submit">
                          <span class="typeahead__search-icon"></span>
                      </button>
                  </div>
              </div>
          </div>
      </form>
      

      组态

      用户的配置对象将与默认插件配置合并。

      /**
       * @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
          multiselect: null,          // Multiselect configuration object, see documentation for all options
          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
              onEnter: null,              // When an item in the result list is focused
              onLeave: null,              // When an item in the result list is blurred
              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",
              labelContainer: "typeahead__label-container",
              label: "typeahead__label",
              button: "typeahead__button",
              backdrop: "typeahead__backdrop",
              hint: "typeahead__hint",
              cancelButton: "typeahead__cancel-button"
          },
          debug: false // Display debug information (RECOMMENDED for dev environment)
      };
      
      目录
      目录