Appearance

useSearchBar Composable ​

File Information ​

  • Path: app/composables/core/components/search/useSearchBar.ts
  • Purpose: Search bar logic, suggestions, and results display
  • Type: Core Composable

Overview ​

Search bar logic, suggestions, and results display

Features ​

Submitting a search (fetchResults) ​

The bar behaves differently depending on whether the user is already on the search results page (route.name === "brand_name-search").

  • On the results page the bar does not search itself. It rewrites the encrypted q URL and hands the query to useSearch through the search-results-page mitt event. It emits search-url-from-bar first so useSearch skips the reload its route.query.q watcher would otherwise trigger, and the page runs one search instead of two. See useSearch URL state.
  • Anywhere else it runs a dropdown preview search:
SettingValue
Collectionsdigital_assets, plus dam_collections and digital_assets_categories unless an asset-only filter is active (hasAssetOnlyFilter)
FiltersgetCollectionFilters("", includeLibrary) from useCommonSearch
FieldsbuildSearchFieldParams(collections) (weights shared with admin)
per_pageSEARCH_LIBRARY_DROPDOWN_LIMIT (5)
sort_by_text_match:desc,modified_at:desc (the _eval band is prepended by searchAssets)
text_match_typemax_score
qformatted query or *

Asset hits get search_matches from getSearchMatches. Collage and folder hits are cut to 5 and mapped with mapCollageHit / mapFolderHit and their found totals are kept in collageCount / folderCount. A successful preview is tracked with trackSearchPerformed({ ..., source: "overlay" }), with folder and collage counts sent as null when the library was excluded. Errors show getSearchErrorMessage(error) in the snackbar and clear the dropdown.

Recent searches are only posted (postRecentSearch) for queries of at least MIN_SEARCH_LENGTH = 3 characters.

Opening the results page (redirectToSearch(tabArg?)) ​

Used by "View all" links and the submit action from outside the results page.

  1. tabArg is used only if it is a string in SEARCH_TABS; anything else (for example a MouseEvent from a click handler) is ignored and the tab becomes assets.
  2. Cancel the pending debounced search and filter timeout, clear searchHistory.
  3. Post a recent search when the formatted term has at least MIN_SEARCH_LENGTH (3) characters, and store the key.
  4. Encrypt { searchKey: searchTerm || null, filter: allFilterList, tab } and router.push to brand_name-search with only ?q=<encrypted>.

Since ee26b58 the tab travels inside q instead of a separate ?tab= param (which was added only for non-assets tabs). Errors show getSearchErrorMessage(error) in the snackbar.

typescript
// "View all collages" in the dropdown
redirectToSearch("collages")
// -> /<brand_name>/search?q=<encrypt({ searchKey: "logo", filter: [], tab: "collages" })>

SearchBar.vue computes hasMatchColumn over the items of every visible section (showAssets, showCollages, showFolders) and passes it as :match-column to the asset, collage and folder lists (340c6e0). The shared "Matched In" header and all three lists therefore show or hide the column together, keeping columns aligned under one header. See useSearchAssets.

Tabs ​

SearchBar.vue renders SearchTabs with include-all (All / Assets / Collages / Folders) above the dropdown results; the active tab is component state, not part of this composable.

Return Type ​

Refer to the composable source code for return type definitions. Composables use TypeScript for type-safe return values.

Parameters ​

Refer to the composable source code for parameter definitions. Composables use TypeScript for type-safe parameters.

Usage Example ​

typescript
import { useSearchBar } from '~/composables/core/components/search/useSearchBar'

const { /* destructured return values */ } = useSearchBar()