AutoSuggest.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. <script setup lang="ts">
  2. import { ref, computed } from "vue";
  3. const props = defineProps({
  4. modelValue: { type: String, default: "" },
  5. placeholder: { type: String, default: "Search value" },
  6. disabled: { type: Boolean, default: false },
  7. allItems: { type: Array, default: () => [] }
  8. });
  9. const emit = defineEmits(["update:modelValue", "submitted"]);
  10. const inputFocussed = ref(false);
  11. const containerFocussed = ref(false);
  12. const itemFocussed = ref(false);
  13. const keydownInputTimeout = ref();
  14. const items = ref([]);
  15. const value = computed({
  16. get: () => props.modelValue,
  17. set: value => emit("update:modelValue", value)
  18. });
  19. const blurInput = event => {
  20. if (
  21. event.relatedTarget &&
  22. event.relatedTarget.classList.contains("autosuggest-item")
  23. )
  24. itemFocussed.value = true;
  25. inputFocussed.value = false;
  26. };
  27. const focusInput = () => {
  28. inputFocussed.value = true;
  29. };
  30. const keydownInput = () => {
  31. clearTimeout(keydownInputTimeout.value);
  32. keydownInputTimeout.value = setTimeout(() => {
  33. if (value.value && value.value.length > 1) {
  34. items.value = props.allItems.filter((item: string) =>
  35. item.toLowerCase().startsWith(value.value.toLowerCase())
  36. );
  37. } else items.value = [];
  38. }, 1000);
  39. };
  40. const focusAutosuggestContainer = () => {
  41. containerFocussed.value = true;
  42. };
  43. const blurAutosuggestContainer = () => {
  44. containerFocussed.value = false;
  45. };
  46. const selectAutosuggestItem = item => {
  47. value.value = item;
  48. items.value = [];
  49. };
  50. const focusAutosuggestItem = () => {
  51. itemFocussed.value = true;
  52. };
  53. const blurAutosuggestItem = event => {
  54. if (
  55. !event.relatedTarget ||
  56. !event.relatedTarget.classList.contains("autosuggest-item")
  57. )
  58. itemFocussed.value = false;
  59. };
  60. </script>
  61. <template>
  62. <div>
  63. <input
  64. v-model="value"
  65. class="input"
  66. type="text"
  67. :placeholder="placeholder"
  68. :disabled="disabled"
  69. @blur="blurInput($event)"
  70. @focus="focusInput()"
  71. @keydown.enter="emit('submitted')"
  72. @keydown="keydownInput()"
  73. />
  74. <div
  75. class="autosuggest-container"
  76. v-if="
  77. (inputFocussed || containerFocussed || itemFocussed) &&
  78. items.length > 0
  79. "
  80. @mouseover="focusAutosuggestContainer()"
  81. @mouseleave="blurAutosuggestContainer()"
  82. >
  83. <span
  84. class="autosuggest-item"
  85. tabindex="0"
  86. @click="selectAutosuggestItem(item)"
  87. @keyup.enter="selectAutosuggestItem(item)"
  88. @focus="focusAutosuggestItem()"
  89. @blur="blurAutosuggestItem($event)"
  90. v-for="item in items"
  91. :key="item"
  92. >
  93. {{ item }}
  94. </span>
  95. </div>
  96. </div>
  97. </template>
  98. <style lang="less" scoped>
  99. .night-mode .autosuggest-container {
  100. background-color: var(--dark-grey) !important;
  101. .autosuggest-item {
  102. background-color: var(--dark-grey) !important;
  103. color: var(--white) !important;
  104. border-color: var(--dark-grey) !important;
  105. }
  106. .autosuggest-item:hover,
  107. .autosuggest-item:focus {
  108. background-color: var(--dark-grey-2) !important;
  109. }
  110. }
  111. .autosuggest-container {
  112. position: absolute;
  113. background: var(--white);
  114. width: calc(100% + 1px);
  115. top: 35px;
  116. z-index: 200;
  117. overflow: auto;
  118. max-height: 98px;
  119. clear: both;
  120. .autosuggest-item {
  121. padding: 8px;
  122. display: block;
  123. border: 1px solid var(--light-grey-2);
  124. margin-top: -1px;
  125. line-height: 16px;
  126. cursor: pointer;
  127. -webkit-user-select: none;
  128. -ms-user-select: none;
  129. -moz-user-select: none;
  130. user-select: none;
  131. }
  132. .autosuggest-item:hover,
  133. .autosuggest-item:focus {
  134. background-color: var(--light-grey);
  135. }
  136. .autosuggest-item:first-child {
  137. border-top: none;
  138. }
  139. .autosuggest-item:last-child {
  140. border-radius: 0 0 @border-radius @border-radius;
  141. }
  142. }
  143. </style>