feat(Autocomplete): initial commit

Author: mrholek

docs/assets/js/partials/snippets.js

@@ -167,6 +167,116 @@ export default () => {
     })
   }
 
+  // -------------------------------
+  // Aurocomplete
+  // -------------------------------
+  // 'Autocomplete components' example in docs only
+  // js-docs-start autocomplete-array-data
+  const myAutoComplete = document.getElementById('myAutoComplete')
+
+  if (myAutoComplete) {
+    new coreui.Autocomplete(myAutoComplete, {
+      name: 'autocomplete',
+      options: [
+        'Angular',
+        'Bootstrap',
+        {
+          label: 'React.js',
+          disabled: true
+        },
+        'Vue.js',
+        {
+          label: 'backend',
+          options: ['Django', 'Laravel', 'Node.js']
+        }
+      ],
+      value: 'Laravel'
+    })
+  }
+  // js-docs-end autocomplete-array-data
+
+  // js-docs-start autocomplete-grouped-data
+  const myAutoCompleteGrouped = document.getElementById('myAutoCompleteGrouped')
+
+  if (myAutoCompleteGrouped) {
+    new coreui.Autocomplete(myAutoCompleteGrouped, {
+      name: 'autocomplete-grouped',
+      options: [
+        'Angular',
+        {
+          label: 'Bootstrap',
+          selected: true
+        },
+        {
+          label: 'React.js',
+          disabled: true
+        },
+        'Vue.js',
+        {
+          label: 'backend',
+          options: ['Django', 'Laravel', 'Node.js']
+        }
+      ]
+    })
+  }
+  // js-docs-end autocomplete-grouped-data
+
+  // js-docs-start autocomplete-external-data
+  const myAutoCompleteExternalData = document.getElementById('myAutoCompleteExternalData')
+
+  if (myAutoCompleteExternalData) {
+    const getUsers = async (name = '') => {
+      try {
+        const response = await fetch(`https://apitest.coreui.io/demos/users?first_name=${name}&limit=10`)
+        const users = await response.json()
+
+        return users.records.map(user => ({
+          value: user.id,
+          label: user.first_name
+        }))
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Error fetching users:', error)
+      }
+    }
+
+    const autocomplete = new coreui.Autocomplete(myAutoCompleteExternalData, {
+      cleaner: true,
+      highlightOptionsOnSearch: true,
+      name: 'autocomplete-external',
+      options: [],
+      placeholder: 'Search names...',
+      search: ['external', 'global'], // 🔴 'external' is required for external search
+      showHints: true
+    })
+
+    let lastQuery = null
+    let debounceTimer = null
+
+    myAutoCompleteExternalData.addEventListener('show.coreui.autocomplete', async () => {
+      const users = await getUsers()
+      autocomplete.update({ options: users })
+    })
+
+    myAutoCompleteExternalData.addEventListener('input.coreui.autocomplete', event => {
+      const query = event.value
+
+      if (query === lastQuery) {
+        return
+      }
+
+      lastQuery = query
+
+      clearTimeout(debounceTimer)
+
+      debounceTimer = setTimeout(async () => {
+        const users = await getUsers(query)
+        autocomplete.update({ options: users })
+      }, 200)
+    })
+  }
+  // js-docs-end autocomplete-external-data
+
   // -------------------------------
   // Multi Selects
   // -------------------------------