fix(autocomplete): add function

Author: koory1st

packages/autocomplete/package.json

@@ -21,6 +21,7 @@
   "type": "module",
   "devDependencies": {
     "@svelement-ui/input": "workspace:^",
+    "@svelement-ui/scrollbar": "workspace:^",
     "@svelement-ui/theme-chalk": "workspace:^",
     "@svelement-ui/tooltip": "workspace:^",
     "@svelement-ui/util-array-2-class-string": "workspace:^"

packages/autocomplete/src/lib/autocomplete.svelte

@@ -2,14 +2,23 @@
   import a2s from '@svelement-ui/util-array-2-class-string';
   import SvelInput from '@svelement-ui/input';
   import SvelTooltip from '@svelement-ui/tooltip';
+  import SvelScrollbar from '@svelement-ui/scrollbar';
   import { getContext } from 'svelte';
 
   export let value;
+  export let fetchSuggestions;
+  export let triggerOnFocus = true;
+
+  let suggestions = [];
+  let dropdownWidth = '';
+  let ignoreFocusEvent = false;
+  let suggestionDisabled = false;
+  let loading = false;
+  let activated = false;
   let tooltipVisible = false;
   $: dark = dark || getContext('svel-dark');
 
-  function handleInputClick() {
-    console.log(tooltipVisible);
+  function handleFocus() {
     tooltipVisible = true;
   }
 
@@ -18,14 +27,20 @@
   }
 </script>
 
-<SvelTooltip visible={tooltipVisible}>
+<SvelTooltip effect="light" visible={tooltipVisible}>
   <div
     aria-controls="svel-id-6711-108"
     aria-expanded="false"
     aria-haspopup="listbox"
     role="combobox"
   >
-    <SvelInput bind:value on:blur={handleInputBlur} on:focus={handleInputClick} />
+    <SvelInput bind:value on:blur={handleInputBlur} on:focus={handleFocus} />
+  </div>
+  <div slot="content">
+    <div role="region">
+      <SvelScrollbar>
+        <li>1</li>
+      </SvelScrollbar>
+    </div>
   </div>
-  <div slot="content">11111111111111111</div>
 </SvelTooltip>

packages/autocomplete/src/routes/+page.svelte

@@ -1,5 +1,31 @@
 <script>
   import SvelAutoComplete from '$lib/index.js';
+
+  let value = '';
+  const restaurants = [];
+  const querySearch = (queryString, cb) => {
+    const results = queryString
+      ? restaurants.value.filter(createFilter(queryString))
+      : restaurants.value;
+    // call callback function to return suggestions
+    cb(results);
+  };
+  const createFilter = (queryString) => {
+    return (restaurant) => {
+      return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
+    };
+  };
+  const loadAll = () => {
+    return [
+      { value: 'vue', link: 'https://github.com/vuejs/vue' },
+      { value: 'element', link: 'https://github.com/ElemeFE/element' },
+      { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+      { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+      { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+      { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+      { value: 'babel', link: 'https://github.com/babel/babel' },
+    ];
+  };
 </script>
 
-<SvelAutoComplete>aaaa</SvelAutoComplete>
+<SvelAutoComplete fetchSuggestions={querySearch} />