repro search issue in svelte

src/database/constants.js

@@ -14,4 +14,4 @@ export const MODE_READONLY = 'readonly'
 export const MODE_READWRITE = 'readwrite'
 
 export const DEFAULT_DATA_SOURCE = 'https://cdn.jsdelivr.net/npm/emojibase-data@5/en/data.json'
-export const DEFAULT_LOCALE = 'en'
+export const DEFAULT_LOCALE = 'en'

src/database/transformEmojiBaseData.js

@@ -1,6 +1,14 @@
 export function transformEmojiBaseData (emojiBaseData) {
   return emojiBaseData.map(({ annotation, emoticon, group, order, shortcodes, tags, emoji, version }) => {
-    const tokens = [].concat(shortcodes).concat(tags).map(_ => _.toLowerCase())
+    const tokens = [...new Set(
+      [
+        ...shortcodes.map(shortcode => shortcode.split('_')).flat(),
+        ...tags,
+        ...annotation.split(/\s+/),
+        emoticon
+      ].filter(Boolean)
+        .map(_ => _.toLowerCase())
+    )].sort()
     const res = {
       annotation,
       group,

src/svelte/Picker.svelte

@@ -9,6 +9,7 @@
             placeholder={i18n.search}
             autocapitalize="none"
             spellcheck="true"
+            bind:value={searchText}
     >
     <label class="lep-sr-only" for="lite-emoji-picker-search">{i18n.search}</label>
   </div>
@@ -87,21 +88,37 @@
   import { categories } from './categories'
   import { DEFAULT_LOCALE, DEFAULT_DATA_SOURCE } from '../database/constants'
   import { Database } from '../database/Database'
+  import { MIN_SEARCH_TEXT_LENGTH } from './constants'
 
   let currentEmojis = []
   let locale = DEFAULT_LOCALE
   let dataSource = DEFAULT_DATA_SOURCE
   let currentCategory = categories[0]
+  let searchText = ''
   $: database = new Database({ dataSource, locale })
   $: {
     getEmojisByGroup(currentCategory.group).then(emojis => {
       currentEmojis = emojis
     })
   }
+  $: {
+    if (searchText.length >= MIN_SEARCH_TEXT_LENGTH) {
+      database.getEmojiBySearchPrefix(searchText).then(emojis => {
+        currentEmojis = emojis
+      })
+    }
+  }
+
+  function filterEmojis (emojis) {
+    return emojis.filter(emoji => emoji.version <= emojiSupportLevel)
+  }
 
   async function getEmojisByGroup(group) {
-    const emojis = await database.getEmojiByGroup(group)
-    return emojis.filter(emoji => emoji.version <= emojiSupportLevel)
+    return filterEmojis(await database.getEmojiByGroup(group))
+  }
+
+  async function getEmojisBySearchPrefix(prefix) {
+    return filterEmojis(await database.getEmojiBySearchPrefix(prefix))
   }
 
   function handleCategoryClick(category) {

src/svelte/categories.js

@@ -1,12 +1,12 @@
 // via https://unpkg.com/browse/emojibase-data@5.0.1/meta/groups.json
 export const categories = [
-  {group: 0, name: 'smileys-emotion'},
-  {group: 1, name: 'people-body'},
-  {group: 3, name: 'animals-nature'},
-  {group: 4, name: 'food-drink'},
-  {group: 5, name: 'travel-places'},
-  {group: 6, name: 'activities'},
-  {group: 7, name: 'objects'},
-  {group: 8, name: 'symbols'},
-  {group: 9, name: 'flags'}
+  { group: 0, name: 'smileys-emotion' },
+  { group: 1, name: 'people-body' },
+  { group: 3, name: 'animals-nature' },
+  { group: 4, name: 'food-drink' },
+  { group: 5, name: 'travel-places' },
+  { group: 6, name: 'activities' },
+  { group: 7, name: 'objects' },
+  { group: 8, name: 'symbols' },
+  { group: 9, name: 'flags' }
 ]

src/svelte/constants.js

@@ -0,0 +1 @@
+export const MIN_SEARCH_TEXT_LENGTH = 2

src/svelte/utils/determineEmojiSupportLevel.js

@@ -12,6 +12,6 @@ export function determineEmojiSupportLevel () {
       supported
     }
   })
-  console.log("versionsWithSupports", versionsWithSupports)
+  console.log('versionsWithSupports', versionsWithSupports)
   return versionsWithSupports.filter(_ => _.supported).map(_ => _.version).sort((a, b) => a < b ? 1 : -1)[0]
-}
+}