working on Autocomplete field for member addition to projects

frontend/src/Components/MemberEditor.svelte

@@ -1,6 +1,7 @@
 <script>
     import { onMount } from 'svelte';
     import { t } from '../translations.svelte.js';
+    import Autocomplete from './Autocomplete.svelte';
     import PermissionSelector from './PermissionSelector.svelte';
     let { members, updatePermission = (uid,perm) => console.log({user:uid,perm:perm}) } = $props();
     let error = $state(null);
@@ -18,6 +19,32 @@
         }
     }
 
+    async function getOptionsFor(text){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/search`;
+        var resp = await fetch(url,{
+            credentials: 'include',
+            method: 'POST',
+            body: text
+        });
+        if (resp.ok){
+            var json = await resp.json();
+            if (Array.isArray(json)) return json;
+            if (typeof json == 'object'){
+                let names = Object.values(json).map(user => user.name);
+                if (names.length > 10) names.length = 10;
+                return names;
+            }
+            console.warn('not an array:',json);
+            return [];
+        } else {
+            return [];
+        }
+    }
+
+    function onSelect(name){
+        console.log({selected_user:name})
+    }
+
     onMount(loadPermissions);
 
 </script>
@@ -41,7 +68,9 @@
         <tr>
             <td></td>
             <td>{t('add_member')}</td>
-            <td><input type="text" /></td>
+            <td>
+                <Autocomplete {getOptionsFor} {onSelect} />
+            </td>
         </tr>
     </tbody>
 </table>