尤明明Blog

网站建设 | 前端切图,技术不仅是一种专业,更是一种责任!

您的当前位置: 首页 » 前端学习 » jQuery插件 »

jQuery.Typeahead.js表单自动补全插件

2020-06-08   Umming   jQuery插件    评论(0)    浏览(2336)


jQuery.Typeahead.js表单自动补全插件

jQuery Typeahead插件为搜索输入提供了自动完成预览, 类似于百度、google 搜索与内置选项和深度定制。这是一个简单的客户端库, 将添加更好的用户体验到您的网站搜索功能中, 通过相同的域 ajax 或跨域 jsonp 提供 typeahead (自动完成) 搜索预览, 并在本地存储中提供数据压缩。该插件是建立了很多选项和回调, 以允许自定义。

使用方法

要求jquery 1.7.2以上版本,和typeahead


  1. <html>
  2. <head>
  3. ...
  4. <!-- Optional CSS -->
  5. <linkrel="stylesheet"href="/vendor/jquery-typeahead/dist/jquery.typeahead.min.css">
  6. <!-- Required JavaScript -->
  7. <script src="/jquery/jquery-1.10.2.js"></script>
  8. <scriptsrc="/vendor/jquery-typeahead/dist/jquery.typeahead.min.js"></script>
  9. ...
  10. </head>


初始化

有2种方法可以初始化 typeahead 搜索:

1、调用 typeahead () theinputoption 配置的函数 [推荐]

  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. });

2、使用独特 inputselector 创建一个 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. });


html 结构和 css

typeahead 插件需要一个特定的 html 结构。这提供了一些优点:

轻松的 html 集成

默认样式使用 /dist/jquery.typeahead.min.css

Bootstrap 3 and 4 ready

* 2.5.0 typeahead 使用 theBEMcss 标准

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


配置

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

  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. };


预览地址:https://www.umming.com/demo/typeahead

标签: jquery代码 jQuery插件

本文链接:https://www.umming.com/jquery/249.html

声明:本站信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!


//