jquery.autocomplete-tests.ts 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. ///<reference path="../jquery/jquery.d.ts" />
  2. ///<reference path="../jquery-autocomplete/jquery.autocomplete.d.ts" />
  3. // ----------------------------------------------------------------------------------------
  4. // --------------------------------- WEBSITE EXAMPLE --------------------------------------
  5. // ---------- https://www.devbridge.com/sourcery/components/jquery-autocomplete/ ----------
  6. // ----------------------------------------------------------------------------------------
  7. var input = $('#autocomplete');
  8. var options = {};
  9. input.autocomplete('disable');
  10. input.autocomplete('setOptions', options);
  11. input.autocomplete().disable();
  12. input.autocomplete().setOptions(options);
  13. // Ajax lookup:
  14. input.autocomplete({
  15. serviceUrl: '/autocomplete/countries',
  16. onSelect: function (suggestion) {
  17. alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
  18. }
  19. });
  20. // Local lookup (no ajax):
  21. var countries = [
  22. { value: 'Andorra', data: 'AD' },
  23. // ...
  24. { value: 'Zimbabwe', data: 'ZZ' }
  25. ];
  26. input.autocomplete({
  27. lookup: countries,
  28. onSelect: function (suggestion) {
  29. alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
  30. }
  31. });
  32. // Non standard query/results
  33. input.autocomplete({
  34. paramName: 'searchString',
  35. transformResult: function(response: any, originalQuery: string): AutocompleteResponse {
  36. return {
  37. suggestions: $.map(response.myData, function (dataItem) {
  38. return {value: dataItem.valueField, data: dataItem.dataField};
  39. })
  40. };
  41. }
  42. });
  43. // ----------------------------------------------------------------------------------------
  44. // ------------------------------ TEST INSTANCE METHODS -----------------------------------
  45. // ----------------------------------------------------------------------------------------
  46. input.autocomplete().setOptions(options);
  47. input.autocomplete().clear();
  48. input.autocomplete().clearCache();
  49. input.autocomplete().disable();
  50. input.autocomplete().enable();
  51. input.autocomplete().hide();
  52. input.autocomplete().dispose();
  53. // ----------------------------------------------------------------------------------------
  54. // ------------------------------ TEST DEFAULT OPTIONS ------------------------------------
  55. // ----------------------------------------------------------------------------------------
  56. input.autocomplete({
  57. //----------------o AJAX SETTINGS
  58. serviceUrl: '/autocomplete/countries',
  59. type: 'GET',
  60. dataType: 'text',
  61. paramName: 'query',
  62. params: {},
  63. deferRequestBy: 0,
  64. ajaxSettings: {},
  65. //----------------o CONFIG SETTINGS
  66. noCache: false,
  67. delimiter: "-",
  68. onSearchStart(query: string) {
  69. console.log("query: ", query);
  70. },
  71. onSearchComplete(query: string, suggestions: AutocompleteSuggestion[]) {
  72. console.log("query: ", query);
  73. console.log("suggestions: ", suggestions);
  74. },
  75. onSearchError(query: string, jqXHR: JQueryXHR, textStatus: string, errorThrown: any) {
  76. console.log("query: ", query);
  77. console.log("jqXHR: ", jqXHR);
  78. console.log("textStatus: ", textStatus);
  79. console.log("errorThrown: ", errorThrown);
  80. },
  81. transformResult(response: any, originalQuery: string): AutocompleteResponse {
  82. return {
  83. suggestions: [
  84. { value: 'Andorra', data: 'AD' },
  85. // ...
  86. { value: 'Zimbabwe', data: 'ZZ' }
  87. ]
  88. }
  89. },
  90. onSelect(suggestion: AutocompleteSuggestion) {
  91. console.log("suggestions: ", suggestion);
  92. },
  93. minChars: 1,
  94. lookupLimit: 1,
  95. lookup: [
  96. { value: 'Andorra', data: 'AD' },
  97. // ...
  98. { value: 'Zimbabwe', data: 'ZZ' }
  99. ],
  100. lookupFilter(suggestion: AutocompleteSuggestion, query: string, queryLowercase: string): any {
  101. return query !== "query"
  102. },
  103. triggerSelectOnValidInput: true,
  104. preventBadQueries: true,
  105. autoSelectFirst: false,
  106. onHide(container: any) {
  107. console.log("container: ", container);
  108. },
  109. //----------------o PRESENTATION SETTINGS
  110. beforeRender(container: any) {
  111. console.log("container: ", container);
  112. },
  113. formatResult(suggestion: AutocompleteSuggestion, currentValue: string): string {
  114. return currentValue;
  115. },
  116. groupBy: "category",
  117. maxHeight: 300,
  118. width: "auto",
  119. zIndex: 9999,
  120. appendTo: document.body,
  121. forceFixPosition: false,
  122. orientation: "bottom",
  123. preserveInput: false,
  124. showNoSuggestionNotice: false,
  125. noSuggestionNotice: "No results",
  126. onInvalidateSelection() {
  127. console.log("onInvalidateSelection");
  128. },
  129. tabDisabled: false
  130. });