Improve the autocomplete UX a little

frontend/src/lib/components/Energy/EmptyFoodComp.svelte

@@ -31,18 +31,21 @@
 		if (!name) {
 			foodSearch = [];
 		} else {
-			if (!per100Edited)
+			updateAutocomplete();
+		}
+	}
+
+	function updateAutocomplete() {
+		if (!per100Edited)
 			GetLastPer100(name.trim()).then((res) => {
 				// Prevent search when there's nothing to search
 				// Sometimes we get search results after deleting name
-				console.log(name.trim(), res);
 				if (res.success && res.data && name) {
 					foodSearch = res.data;
 				} else {
 					foodSearch = [];
 				}
 			});
-		}
 	}
 
 	async function update(event: KeyboardEvent & { currentTarget: EventTarget & HTMLTableCellElement }) {
@@ -102,7 +105,7 @@
 	// }
 	function setInputVal(food: main.Food) {
 		name = food.food;
-		per100 = String(food.per100)
+		per100 = String(food.per100);
 		hiLiteIndex = null;
 		foodSearch = [];
 	}
@@ -133,6 +136,8 @@
 			contenteditable="true"
 			autofocus
 			on:keydown={update}
+			on:focusin={updateAutocomplete}
+			on:focusout={() => foodSearch = []}
 			bind:this={nameElement}
 		/>
 		<td
@@ -162,11 +167,7 @@
 	{#if foodSearch.length > 0}
 		<ul bind:this={autocompleteList} class="z-50 fixed top-0 left-0 w-3/12 border border-x-gray-800">
 			{#each foodSearch as f, i}
-				<FoodSearchEntry
+				<FoodSearchEntry itemLabel={f.food} highlighted={i == hiLiteIndex} on:click={() => setInputVal(f)} />
-					itemLabel={f.food}
-					highlighted={i == hiLiteIndex}
-					on:click={() => setInputVal(f)}
-				/>
 			{/each}
 		</ul>
 	{/if}