> For the complete documentation index, see [llms.txt](https://alhena.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://alhena.gitbook.io/docs/developer-reference/website-sdk/examples/search-suggestions.md). # Search Box Suggestions Show Alhena's searches and AI questions in your own search box, with an Ask AI row for what the shopper typed. This example adds Alhena's suggestions to your store's search box. As the shopper types, the dropdown shows: 1. **Ask AI:** first, what the shopper typed, which opens the Alhena chat with it. Then Alhena's AI questions for what they typed. 2. **Searches** that complete what the shopper typed. Picking one runs your store's search. When the shopper taps into the empty box, the dropdown shows AI questions and popular searches for the page they're on. ## What You'll Learn * Ask for suggestions with `getSearchSuggestions()` as the shopper types * Add your own first row that asks the AI about what the shopper typed * Open the Alhena chat for Ask AI rows with `sendMessage()` ## Prerequisites * Alhena SDK installed on your website * Search suggestions turned on for your store by the Alhena team ## Code Example ```html Search Box Suggestions
``` ## How It Works ### Asking for suggestions Call `getSearchSuggestions()` when the shopper taps into the box and on every change after that. Pass the box's value as it is, including a trailing space: it tells Alhena the last word is finished. You don't need to wait between keystrokes. Answers are quick, repeated text is answered from memory, and a slow answer comes back empty after a second. Answers can arrive out of order, so draw only the newest one. ### The first row: ask the AI about what the shopper typed This row is yours. Alhena doesn't send it. It appears as soon as the shopper types and shows their own words. Picking it calls `sendMessage()`, which opens the Alhena chat and sends the text as the shopper's message. Style it like the other Ask AI rows, so shoppers see all three as ways to ask the AI. ### Picking a suggestion `getSearchSuggestions()` only returns the rows. What a pick does is up to you. In this example: | The shopper picks | Call | What happens | | ----------------- | ---------------------------- | ------------------------------------------ | | Your first row | `sendMessage(typedText)` | The chat opens and answers what they typed | | An AI question | `sendMessage(question.text)` | The chat opens and answers the question | | A search | Your own search | Your store's search runs for that text | ### Where suggestions come from * **Your catalog.** Alhena writes searches for each product category from its products. * **Your shoppers' searches.** Searches made by several shoppers on your site rank first, most searched first. * **AI questions.** Each search comes with its own AI questions. ## Tips * Keep Alhena's rows in the order given. The best ones come first. * Show the dropdown for an empty box too. On a product or collection page, those rows fit the page. * If your dropdown has room for fewer rows, show the first AI questions and searches and drop the rest. ## Related * [getSearchSuggestions(typedText)](/docs/developer-reference/website-sdk/javascript-api.md#getsearchsuggestions-typedtext) * [sendMessage(message)](/docs/developer-reference/website-sdk/javascript-api.md#sendmessage-message-options) * [Calling the endpoint directly](/docs/developer-reference/website-sdk/javascript-api.md#calling-the-endpoint-directly)