├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── src
    ├── Autocomplete.vue
    ├── index.js
    ├── interfaces
    │   └── ComponentProps.ts
    └── main.ts
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue3-autocomplete
 2 | 
 3 | ## Table of contents
 4 | 
 5 | * [Installation](#installation)
 6 | * [Usage](#usage)
 7 | 
 8 | ## Installation
 9 | 
10 | Using npm
11 | ```
12 | npm install vue3-autocomplete
13 | ```
14 | 
15 | Using yarn
16 | ```
17 | yarn add vue3-autocomplete
18 | ```
19 | 
20 | ## Usage
21 | 
22 | Load the component globally...
23 | 
24 | ```ts
25 | import App from './App.vue' // Or whatever you need
26 | import Autocomplete from 'vue3-autocomplete'
27 | // Optional: Import default CSS
28 | import 'vue3-autocomplete/dist/vue3-autocomplete.css'
29 | 
30 | let app = createApp(App)
31 | app.component('Autocomplete', Autocomplete)
32 | app.mount('#app')
33 | ```
34 | 
35 | ... Or locally into your component.
36 | 
37 | ```ts
38 | import Autocomplete from 'vue3-autocomplete'
39 | // Optional: Import default CSS
40 | import 'vue3-autocomplete/dist/vue3-autocomplete.css'
41 | 
42 | export default {
43 |     name: 'YourComponentName',
44 |     components: {
45 |         Autocomplete
46 |     }
47 | }
48 | ```
49 | 
50 | Use the component into your template.
51 | 
52 | ```html
53 | <template>
54 |     <div>
55 |         <Autocomplete
56 |             @input="getItems"
57 |             :results="items"
58 |         ></Autocomplete>
59 |     </div>
60 | </template>
61 | ```
62 | 
63 | ## Properties
64 | 
65 | | Property | Type  | Description | Required | Default |
66 | | :------: | :---: | :---------: | :------: | :-----: |
67 | | results | Array | Items to display in the results list | No | [] |
68 | | display-item | Function | Describes how to render each item in results | No | **return** item.name |
69 | | debounce | Integer | Time to wait before each call to the ***@input*** event | No | 0 |
70 | | max | Integer | Define a render limit for **results** items | No | 10 |
71 | | placeholder | String | Default input placeholder | No | '' |
72 | | use-html-for-results | Boolean | If true, displayItem method will display results as html | No | false |
73 | | input-class | Array | Override input default classes | No | [] |
74 | | results-container-class | Array | Override results container default classes | No | [] |
75 | | results-item-class | Array | Override results item default classes | No | [] |
76 | 
77 | ## Events
78 | 
79 | | Event | Description |
80 | | :---: | :---------: |
81 | | **@input** | Triggered on user input, should update the local results list |
82 | | **@onSelect** | Triggered when user click on a list item and return the selected item |
83 | 
84 | ## License
85 | 
86 | MIT
87 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue3-autocomplete",
 3 |   "version": "1.0.4",
 4 |   "private": false,
 5 |   "main": "dist/vue3-autocomplete.common.js",
 6 |   "unpkg": "dist/vue3-autocomplete.umd.min.js",
 7 |   "jsdelivr": "dist/vue3-autocomplete.umd.min.js",
 8 |   "keywords": [
 9 |     "vue",
10 |     "vuejs",
11 |     "vue3",
12 |     "autocomplete",
13 |     "select",
14 |     "search"
15 |   ],
16 |   "homepage": "",
17 |   "files": [
18 |     "dist/*"
19 |   ],
20 |   "repository": {
21 |     "type": "git",
22 |     "url": "https://github.com/Takachi67/vue3-autocomplete.git"
23 |   },
24 |   "bugs": {
25 |     "url": "https://github.com/Takachi67/vue3-autocomplete/issues"
26 |   },
27 |   "scripts": {
28 |     "serve": "vue-cli-service serve",
29 |     "build": "vue-cli-service build --target lib --name vue3-autocomplete src/Autocomplete.vue",
30 |     "prepublishOnly": "$npm_execpath build",
31 |     "test:unit": "vue-cli-service test:unit"
32 |   },
33 |   "dependencies": {
34 |     "@vue/cli-plugin-typescript": "^4.5.7",
35 |     "axios": ">=0.21.1 <1",
36 |     "sass": "^1.27.0",
37 |     "sass-loader": "^10.0.3",
38 |     "typescript": "^4.0.3",
39 |     "vue": "^3.0.0"
40 |   },
41 |   "devDependencies": {
42 |     "@vue/cli-plugin-unit-jest": "~4.5.0",
43 |     "@vue/cli-service": "~4.5.0",
44 |     "@vue/compiler-sfc": "^3.0.0",
45 |     "@vue/test-utils": "^2.0.0-0",
46 |     "vue-jest": "^5.0.0-0"
47 |   },
48 |   "browserslist": [
49 |     "> 1%",
50 |     "last 2 versions",
51 |     "not dead"
52 |   ],
53 |   "jest": {
54 |     "preset": "@vue/cli-plugin-unit-jest/presets/no-babel",
55 |     "transform": {
56 |       "^.+\\.vue$": "vue-jest"
57 |     }
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/src/Autocomplete.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="vue3-autocomplete-container">
  3 |     <input
  4 |         ref="autocompleteRef"
  5 |         type="text"
  6 |         @input="handleInput"
  7 |         v-bind="$attrs"
  8 |         v-model="searchText"
  9 |         :placeholder="placeholder"
 10 |         :class="getInputClass"
 11 |         @focus="displayResults"
 12 |         @blur="hideResults"
 13 |     />
 14 |     <div :style="{ width: inputWidth + 'px' }" :class="getResultsContainerClass" v-if="shouldShowResults">
 15 |       <div
 16 |           v-if="useHtmlForResults"
 17 |           v-for="item in filteredResults"
 18 |           :key="item"
 19 |           :class="getResultsItemClass"
 20 |           @click="clickItem(item)"
 21 |           @mousedown.prevent
 22 |           v-html="displayItem(item)"
 23 |       ></div>
 24 |       <div
 25 |           v-if="!useHtmlForResults"
 26 |           v-for="item in filteredResults"
 27 |           :key="item"
 28 |           :class="getResultsItemClass"
 29 |           @click="clickItem(item)"
 30 |           @mousedown.prevent
 31 |       >{{ displayItem(item) }}</div>
 32 |     </div>
 33 |   </div>
 34 | </template>
 35 | 
 36 | <script lang="ts">
 37 | import { ref, computed, SetupContext, onMounted } from 'vue'
 38 | import ComponentProps from './interfaces/ComponentProps'
 39 | 
 40 | export default {
 41 |   name: 'Autocomplete',
 42 |   inheritAttrs: false,
 43 |   props: {
 44 |     debounce: {
 45 |       type: Number,
 46 |       default: 0
 47 |     },
 48 |     inputClass: {
 49 |       type: Array,
 50 |       default: []
 51 |     },
 52 |     useHtmlForResults: {
 53 |       type: Boolean,
 54 |       default: false
 55 |     },
 56 |     max: {
 57 |       type: Number,
 58 |       default: 10
 59 |     },
 60 |     placeholder: {
 61 |       type: String,
 62 |       default: ''
 63 |     },
 64 |     results: {
 65 |       type: Array,
 66 |       default: []
 67 |     },
 68 |     resultsContainerClass: {
 69 |       type: Array,
 70 |       default: []
 71 |     },
 72 |     resultsItemClass: {
 73 |       type: Array,
 74 |       default: []
 75 |     },
 76 |     displayItem: {
 77 |       type: Function,
 78 |       default: (item: Object|String) => {
 79 |         // @ts-ignore
 80 |         return typeof item === 'string' ? item : item.name
 81 |       }
 82 |     }
 83 |   },
 84 |   emits: [
 85 |     'input',
 86 |     'onSelect'
 87 |   ],
 88 |   setup(props: ComponentProps, context: SetupContext) {
 89 |     const autocompleteRef = ref()
 90 | 
 91 |     let inputWidth = ref(0),
 92 |         searchText = ref(''),
 93 |         timeout: NodeJS.Timeout,
 94 |         showResults = ref(true)
 95 | 
 96 |     /**
 97 |      * Same as Vue2 'mounted' function, used to get refs correctly
 98 |      */
 99 |     onMounted(() => {
100 |       inputWidth.value = autocompleteRef.value.offsetWidth - 2
101 |     })
102 | 
103 |     /**
104 |      * Triggered on input changes with a dynamic debounce
105 |      * @param { InputEvent } e
106 |      */
107 |     function handleInput(e: any) {
108 |       clearTimeout(timeout)
109 |       timeout = setTimeout(() => {
110 |         context.emit('input', e.target.value)
111 |       }, props.debounce)
112 |     }
113 | 
114 |     /**
115 |      * Triggered on click on a result item
116 |      */
117 |     function clickItem(data: Object) {
118 |       context.emit('onSelect', data)
119 |       showResults.value = false
120 |     }
121 | 
122 |     /**
123 |      * Called on focus
124 |      */
125 |     function displayResults() {
126 |       showResults.value = true
127 |     }
128 | 
129 |     /**
130 |      * Called on blur
131 |      */
132 |     function hideResults() {
133 |       showResults.value = false
134 |     }
135 | 
136 |     /**
137 |      * Manually update the displayed text in the input
138 |      * @param value
139 |      */
140 |     function setText(value: string) {
141 |       searchText.value = value
142 |     }
143 | 
144 |     /**
145 |      * Return class(es) for input element
146 |      */
147 |     const getInputClass = computed(() => {
148 |       return props.inputClass.length > 0 ? props.inputClass : ['vue3-input']
149 |     })
150 | 
151 |     /**
152 |      * Return class(es) for results container element
153 |      */
154 |     const getResultsContainerClass = computed(() => {
155 |       return props.resultsContainerClass.length > 0 ?
156 |           props.resultsContainerClass :
157 |           ['vue3-results-container']
158 |     })
159 | 
160 |     /**
161 |      * Return class(es) for results item elements
162 |      */
163 |     const getResultsItemClass = computed(() => {
164 |       return props.resultsItemClass.length > 0 ?
165 |           props.resultsItemClass :
166 |           ['vue3-results-item']
167 |     })
168 | 
169 |     /**
170 |      * Show results depending on results length and showResults boolean
171 |      */
172 |     const shouldShowResults = computed(() => {
173 |       return showResults.value && (props.results.length > 0)
174 |     })
175 | 
176 |     /**
177 |      * Return results filtered with the 'max' props
178 |      */
179 |     const filteredResults = computed(() => {
180 |       return props.results.slice(0, props.max)
181 |     })
182 | 
183 |     /**
184 |      * Return data, making them reactive
185 |      */
186 |     return {
187 |       searchText,
188 |       showResults,
189 |       autocompleteRef,
190 |       inputWidth,
191 |       displayResults,
192 |       hideResults,
193 |       handleInput,
194 |       clickItem,
195 |       setText,
196 |       filteredResults,
197 |       getInputClass,
198 |       getResultsContainerClass,
199 |       getResultsItemClass,
200 |       shouldShowResults
201 |     }
202 |   }
203 | }
204 | </script>
205 | 
206 | <style lang="scss" scoped>
207 | .vue3-autocomplete-container {
208 |   display: flex;
209 |   flex-direction: column;
210 | 
211 |   .vue3-input {
212 |     border-radius: 5px;
213 | 
214 |     &:focus {
215 |       outline: none;
216 |     }
217 |   }
218 | 
219 |   .vue3-results-container {
220 |     position: absolute;
221 |     top: 27px;
222 |     border: 1px solid black;
223 |     z-index: 99;
224 |     background: white;
225 |   }
226 | 
227 |   .vue3-results-item {
228 |     list-style-type: none;
229 |     padding: 5px;
230 |     border-bottom: 1px solid black;
231 | 
232 |     &:hover {
233 |       cursor: pointer;
234 |     }
235 | 
236 |     &:nth-last-child(1) {
237 |       border-bottom: none;
238 |     }
239 |   }
240 | }
241 | </style>
242 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { default as Autocomplete } from './components/Autocomplete'


--------------------------------------------------------------------------------
/src/interfaces/ComponentProps.ts:
--------------------------------------------------------------------------------
 1 | export default interface ComponentProps {
 2 | 
 3 |     debounce: number
 4 |     inputClass: Array<String>
 5 |     results: Array<any>
 6 |     resultsContainerClass: Array<String>
 7 |     resultsItemClass: Array<String>
 8 |     max: number,
 9 |     placeholder: String,
10 |     useHtmlForResults: Boolean
11 | 
12 |     displayItem(item: Object|String): String
13 | 
14 | }


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | // @ts-ignore
 2 | import Autocomplete from './Autocomplete'
 3 | 
 4 | const AutocompletePlugin = {
 5 |     // @ts-ignore
 6 |     install(Vue, options = {}) {
 7 |         Vue.component('Autocomplete', Autocomplete)
 8 |     }
 9 | }
10 | 
11 | export default AutocompletePlugin
12 | export { Autocomplete }
13 | 
14 | // @ts-ignore
15 | if (typeof window !== 'undefined' && window.Vue) {
16 |     // @ts-ignore
17 |     window.Vue.use(ComponentLibrary)
18 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "moduleResolution": "node"
 8 |   },
 9 |   "include": ["src/**/*"]
10 | }


--------------------------------------------------------------------------------