autocomplete.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. /**
  2. * DevExtreme (ui/autocomplete.js)
  3. * Version: 19.1.16
  4. * Build date: Tue Oct 18 2022
  5. *
  6. * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
  7. * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
  8. */
  9. "use strict";
  10. var $ = require("../core/renderer");
  11. var noop = require("../core/utils/common").noop;
  12. var registerComponent = require("../core/component_registrator");
  13. var extend = require("../core/utils/extend").extend;
  14. var DropDownList = require("./drop_down_editor/ui.drop_down_list");
  15. var AUTOCOMPLETE_CLASS = "dx-autocomplete";
  16. var AUTOCOMPLETE_POPUP_WRAPPER_CLASS = "dx-autocomplete-popup-wrapper";
  17. var Autocomplete = DropDownList.inherit({
  18. _supportedKeys: function() {
  19. var item = this._list ? this._list.option("focusedElement") : null;
  20. var parent = this.callBase();
  21. item = item && $(item);
  22. return extend({}, parent, {
  23. upArrow: function(e) {
  24. e.preventDefault();
  25. e.stopPropagation();
  26. if (item && !this._calcNextItem(-1)) {
  27. this._clearFocusedItem();
  28. return false
  29. }
  30. return true
  31. },
  32. downArrow: function(e) {
  33. e.preventDefault();
  34. e.stopPropagation();
  35. if (item && !this._calcNextItem(1)) {
  36. this._clearFocusedItem();
  37. return false
  38. }
  39. return true
  40. },
  41. enter: function() {
  42. if (!item) {
  43. this.close()
  44. }
  45. parent.enter.apply(this, arguments);
  46. return this.option("opened")
  47. }
  48. })
  49. },
  50. _getDefaultOptions: function() {
  51. return extend(this.callBase(), {
  52. minSearchLength: 1,
  53. maxItemCount: 10,
  54. noDataText: "",
  55. showDropDownButton: false,
  56. searchEnabled: true
  57. })
  58. },
  59. _initMarkup: function() {
  60. this.callBase();
  61. this.$element().addClass(AUTOCOMPLETE_CLASS);
  62. this.setAria("autocomplete", "inline")
  63. },
  64. _displayGetterExpr: function() {
  65. return this.option("valueExpr")
  66. },
  67. _popupConfig: function() {
  68. return extend(this.callBase(), {
  69. closeOnOutsideClick: function(e) {
  70. return !$(e.target).closest(this.$element()).length
  71. }.bind(this)
  72. })
  73. },
  74. _renderDimensions: function() {
  75. this.callBase();
  76. this._setPopupOption("width")
  77. },
  78. _popupWrapperClass: function() {
  79. return this.callBase() + " " + AUTOCOMPLETE_POPUP_WRAPPER_CLASS
  80. },
  81. _listConfig: function() {
  82. return extend(this.callBase(), {
  83. pageLoadMode: "none"
  84. })
  85. },
  86. _listItemClickHandler: function(e) {
  87. var value = this._displayGetter(e.itemData);
  88. this.option("value", value);
  89. this.close()
  90. },
  91. _setListDataSource: function() {
  92. if (!this._list) {
  93. return
  94. }
  95. this._list.option("selectedItems", []);
  96. this.callBase()
  97. },
  98. _refreshSelected: noop,
  99. _searchCanceled: function() {
  100. this.callBase();
  101. this.close()
  102. },
  103. _dataSourceOptions: function() {
  104. return {
  105. paginate: true
  106. }
  107. },
  108. _searchDataSource: function() {
  109. this._dataSource.pageSize(this.option("maxItemCount"));
  110. this.callBase();
  111. this._clearFocusedItem()
  112. },
  113. _clearFocusedItem: function() {
  114. if (this._list) {
  115. this._list.option("focusedElement", null);
  116. this._list.option("selectedIndex", -1)
  117. }
  118. },
  119. _renderValueEventName: function() {
  120. return "input keyup"
  121. },
  122. _valueChangeEventHandler: function(e) {
  123. var value = this._input().val() || null;
  124. return this.callBase(e, value)
  125. },
  126. _optionChanged: function(args) {
  127. switch (args.name) {
  128. case "maxItemCount":
  129. this._searchDataSource();
  130. break;
  131. case "valueExpr":
  132. this._compileDisplayGetter();
  133. this._setListOption("displayExpr", this._displayGetterExpr());
  134. this.callBase(args);
  135. break;
  136. default:
  137. this.callBase(args)
  138. }
  139. },
  140. reset: function() {
  141. this.callBase();
  142. this.close()
  143. }
  144. });
  145. registerComponent("dxAutocomplete", Autocomplete);
  146. module.exports = Autocomplete;
  147. module.exports.default = module.exports;