docs(SelectMenu): improve async search example

docs/components/content/examples/SelectMenuExampleSearchAsync.vue

@@ -1,19 +1,27 @@
 <script setup>
-const search = async (q) => {
+const loading = ref(false)
+const selected = ref([])
+
+async function search (q) {
+  loading.value = true
+
   const users = await $fetch('https://jsonplaceholder.typicode.com/users', { params: { q } })
 
-  return users.map(user => ({ id: user.id, label: user.name, suffix: user.email })).filter(Boolean)
-}
+  loading.value = false
 
-const selected = ref([])
+  return users
+}
 </script>
 
 <template>
   <USelectMenu
     v-model="selected"
+    :loading="loading"
     :searchable="search"
     placeholder="Search for a user..."
+    option-attribute="name"
     multiple
+    trailing
     by="id"
   />
 </template>

docs/content/3.forms/4.select-menu.md

@@ -132,6 +132,18 @@ props:
 ---
 ::
 
+### Control the query :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+
+Use a `v-model:query` to control the search query.
+
+::component-example
+---
+component: 'select-menu-example-search-query'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
 ### Async search
 
 Pass a function to the `searchable` prop to customize the search behavior and filter options according to your needs. The function will receive the query as its first argument and should return an array.
@@ -140,19 +152,7 @@ Use the `debounce` prop to adjust the delay of the function.
 
 ::component-example
 ---
-component: 'select-menu-example-async-search'
-componentProps:
-  class: 'w-full lg:w-48'
----
-::
-
-### Control the query :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
-
-Use a `v-model:query` to control the search query.
-
-::component-example
----
-component: 'select-menu-example-search-query'
+component: 'select-menu-example-search-async'
 componentProps:
   class: 'w-full lg:w-48'
 ---