2023-07-12 11:28:07 +03:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "x-ua-compatible" content = "ie=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2024-01-16 10:41:49 +03:00
< meta name = "generator" content = "ExDoc v0.31.1" >
2023-07-12 11:28:07 +03:00
< meta name = "project" content = "Plausible v0.0.1" >
2024-01-11 10:50:44 +03:00
2023-07-19 11:24:25 +03:00
< title > PlausibleWeb.Live.Components.ComboBox — Plausible v0.0.1< / title >
2024-01-16 10:41:49 +03:00
< link rel = "stylesheet" href = "dist/html-elixir-FM2CSD74.css" / >
2023-07-12 11:28:07 +03:00
< script src = "dist/handlebars.runtime-NWIB6V2M.js" > < / script >
2024-01-11 10:50:44 +03:00
< script src = "dist/handlebars.templates-43PMFBC7.js" > < / script >
2024-04-09 15:36:56 +03:00
< script src = "dist/sidebar_items-9A4530EB.js" > < / script >
2023-07-12 11:28:07 +03:00
< script src = "docs_config.js" > < / script >
2024-01-16 10:41:49 +03:00
< script async src = "dist/html-L4O5OK2K.js" > < / script >
2023-07-12 11:28:07 +03:00
< / head >
< body data-type = "modules" class = "page-module" >
< script >
try {
var settings = JSON.parse(localStorage.getItem('ex_doc:settings') || '{}');
if (settings.theme === 'dark' ||
((settings.theme === 'system' || settings.theme == null) & &
window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.body.classList.add('dark')
}
} catch (error) { }
< / script >
< div class = "main" >
2024-01-16 10:41:49 +03:00
< button id = "sidebar-menu" class = "sidebar-button sidebar-toggle" aria-label = "toggle sidebar" aria-controls = "sidebar" >
2023-07-12 11:28:07 +03:00
< i class = "ri-menu-line ri-lg" title = "Collapse/expand sidebar" > < / i >
< / button >
2024-01-16 10:41:49 +03:00
< div class = "background-layer" > < / div >
2024-01-11 10:50:44 +03:00
< nav id = "sidebar" class = "sidebar" >
2023-07-12 11:28:07 +03:00
< div class = "sidebar-header" >
2024-01-11 10:50:44 +03:00
< div class = "sidebar-projectInfo" >
2023-07-12 11:28:07 +03:00
2024-01-11 10:50:44 +03:00
< a href = "readme.html" class = "sidebar-projectImage" >
< img src = "assets/logo.png" alt = "Plausible" / >
< / a >
2023-07-12 11:28:07 +03:00
2024-01-11 10:50:44 +03:00
< div >
< a href = "readme.html" class = "sidebar-projectName" translate = "no" >
2023-07-12 11:28:07 +03:00
Plausible
2024-01-11 10:50:44 +03:00
< / a >
< div class = "sidebar-projectVersion" translate = "no" >
v0.0.1
< / div >
2023-07-12 11:28:07 +03:00
< / div >
< / div >
2024-01-11 10:50:44 +03:00
< ul id = "sidebar-listNav" class = "sidebar-listNav" role = "tablist" >
< li >
< button id = "extras-list-tab-button" role = "tab" data-type = "extras" aria-controls = "extras-tab-panel" aria-selected = "true" tabindex = "0" >
Pages
< / button >
< / li >
< li >
< button id = "modules-list-tab-button" role = "tab" data-type = "modules" aria-controls = "modules-tab-panel" aria-selected = "false" tabindex = "-1" >
Modules
< / button >
< / li >
< li >
< button id = "tasks-list-tab-button" role = "tab" data-type = "tasks" aria-controls = "tasks-tab-panel" aria-selected = "false" tabindex = "-1" >
< span translate = "no" > Mix< / span > Tasks
< / button >
< / li >
2023-07-12 11:28:07 +03:00
2024-01-11 10:50:44 +03:00
< / ul >
< / div >
2023-07-12 11:28:07 +03:00
2024-01-11 10:50:44 +03:00
< div id = "extras-tab-panel" class = "sidebar-tabpanel" role = "tabpanel" aria-labelledby = "extras-list-tab-button" >
< ul id = "extras-full-list" class = "full-list" > < / ul >
< / div >
2023-07-12 11:28:07 +03:00
2024-01-11 10:50:44 +03:00
< div id = "modules-tab-panel" class = "sidebar-tabpanel" role = "tabpanel" aria-labelledby = "modules-list-tab-button" hidden >
< ul id = "modules-full-list" class = "full-list" > < / ul >
< / div >
2023-07-12 11:28:07 +03:00
2024-01-11 10:50:44 +03:00
< div id = "tasks-tab-panel" class = "sidebar-tabpanel" role = "tabpanel" aria-labelledby = "tasks-list-tab-button" hidden >
< ul id = "tasks-full-list" class = "full-list" > < / ul >
< / div >
< / nav >
2023-07-12 11:28:07 +03:00
2024-01-11 10:50:44 +03:00
< main class = "content" >
2023-07-12 11:28:07 +03:00
< output role = "status" id = "toast" > < / output >
< div class = "content-outer" >
< div id = "content" class = "content-inner" >
2024-01-11 10:50:44 +03:00
< div class = "top-search" >
< div class = "search-settings" >
< form class = "search-bar" action = "search.html" >
< label class = "search-label" >
< span class = "sr-only" > Search documentation of Plausible< / span >
< input name = "q" type = "text" class = "search-input" placeholder = "Search Documentation (press /)" autocomplete = "off" autocorrect = "off" autocapitalize = "off" spellcheck = "false" / >
< / label >
< button type = "submit" class = "search-button" aria-label = "Submit Search" >
< i class = "ri-search-2-line ri-lg" aria-hidden = "true" title = "Submit search" > < / i >
< / button >
< button type = "button" tabindex = "-1" class = "search-close-button" aria-hidden = "true" >
< i class = "ri-close-line ri-lg" title = "Cancel search" > < / i >
< / button >
< / form >
2024-01-16 10:41:49 +03:00
< div class = "autocomplete" >
< / div >
2024-01-11 10:50:44 +03:00
< button class = "icon-settings display-settings" >
< i class = "ri-settings-3-line" > < / i >
< span class = "sr-only" > Settings< / span >
< / button >
< / div >
2024-01-16 10:41:49 +03:00
2024-01-11 10:50:44 +03:00
< / div >
2023-07-12 11:28:07 +03:00
< h1 >
2023-07-19 11:24:25 +03:00
< a href = "https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/combo_box.ex#L1" title = "View Source" class = "icon-action" rel = "help" >
2023-07-12 11:28:07 +03:00
< i class = "ri-code-s-slash-line" aria-hidden = "true" > < / i >
< span class = "sr-only" > View Source< / span >
< / a >
2023-07-19 11:24:25 +03:00
< span translate = "no" > PlausibleWeb.Live.Components.ComboBox< / span >
2023-07-12 11:28:07 +03:00
< small class = "app-vsn" translate = "no" > (Plausible v0.0.1)< / small >
< / h1 >
< section id = "moduledoc" >
< p > Phoenix LiveComponent for a combobox UI element with search and selection
functionality.< / p > < p > The component allows users to select an option from a list of options,
which can be searched by typing in the input field.< / p > < p > The component renders an input field with a dropdown anchor and a
hidden input field for submitting the selected value.< / p > < p > The number of options displayed in the dropdown is limited to 15
by default but can be customized. When a user types into the input
field, the component searches the available options and provides
2023-09-13 15:56:18 +03:00
suggestions based on the input.< / p > < p > Any function can be supplied via < code class = "inline" > suggest_fun< / code > attribute< / p > < ul > < li > see the provided < code class = "inline" > ComboBox.StaticSearch< / code > .< / li > < / ul > < p > In most cases the < code class = "inline" > suggest_fun< / code > runs an operation that could be deferred,
so by default, the < code class = "inline" > async={true}< / code > attr calls it in a background Task
and updates the suggestions asynchronously. This way, you can render
2024-02-27 14:08:56 +03:00
the component without having to wait for suggestions to load.< / p > < p > If you explicitly need to make the operation synchronous, you may
2023-09-13 15:56:18 +03:00
pass < code class = "inline" > async={false}< / code > option.< / p > < p > If your initial < code class = "inline" > options< / code > are not provided up-front at initial render,
lack of < code class = "inline" > options< / code > attr value combined with < code class = "inline" > async=true< / code > calls the
< code class = "inline" > suggest_fun.(" " , [])< / code > asynchronously - that special clause can be used
to provide the initial set of suggestions updated right after the initial render.< / p > < p > To simplify integration testing, suggestions load up synchronously during
tests. This lets you skip waiting for suggestions messages
to arrive. The asynchronous behaviour alone is already tested in
ComboBox own test suite, so there is no need for additional
verification.< / p >
2023-07-12 11:28:07 +03:00
< / section >
< section id = "summary" class = "details-list" >
< h1 class = "section-heading" >
< a class = "hover-link" href = "#summary" >
< i class = "ri-link-m" aria-hidden = "true" > < / i >
< / a >
2024-01-11 10:50:44 +03:00
< span class = "text" > Summary< / span >
2023-07-12 11:28:07 +03:00
< / h1 >
< div class = "summary-functions summary" >
< h2 >
< a href = "#functions" > Functions< / a >
< / h2 >
< div class = "summary-row" >
< div class = "summary-signature" >
< a href = "#dropdown/1" translate = "no" > dropdown(assigns)< / a >
< / div >
2023-09-04 14:45:12 +03:00
< div class = "summary-synopsis" > < h2 > Attributes< / h2 > < ul > < li > < code class = "inline" > ref< / code > (< code class = "inline" > :string< / code > ) (required)< / li > < li > < code class = "inline" > suggestions< / code > (< code class = "inline" > :list< / code > ) - Defaults to < code class = "inline" > []< / code > .< / li > < li > < code class = "inline" > suggest_fun< / code > (< code class = "inline" > :any< / code > ) (required)< / li > < li > < code class = "inline" > target< / code > (< code class = "inline" > :any< / code > )< / li > < li > < code class = "inline" > creatable< / code > (< code class = "inline" > :boolean< / code > ) (required)< / li > < li > < code class = "inline" > display_value< / code > (< code class = "inline" > :string< / code > ) (required)< / li > < / ul > < / div >
2023-07-12 11:28:07 +03:00
< / div >
< div class = "summary-row" >
< div class = "summary-signature" >
< a href = "#dropdown_anchor/1" translate = "no" > dropdown_anchor(assigns)< / a >
< / div >
< div class = "summary-synopsis" > < h2 > Attributes< / h2 > < ul > < li > < code class = "inline" > id< / code > (< code class = "inline" > :any< / code > ) (required)< / li > < / ul > < / div >
< / div >
< div class = "summary-row" >
< div class = "summary-signature" >
< a href = "#handle_event/3" translate = "no" > handle_event(binary, params, socket)< / a >
< / div >
2024-01-11 10:50:44 +03:00
< div class = "summary-synopsis" > < p > Callback implementation for < a href = "https://hexdocs.pm/phoenix_live_view/0.20.3/Phoenix.LiveComponent.html#c:handle_event/3" > < code class = "inline" > Phoenix.LiveComponent.handle_event/3< / code > < / a > .< / p > < / div >
2023-07-12 11:28:07 +03:00
< / div >
< div class = "summary-row" >
< div class = "summary-signature" >
< a href = "#option/1" translate = "no" > option(assigns)< / a >
< / div >
2023-07-21 16:59:32 +03:00
< div class = "summary-synopsis" > < h2 > Attributes< / h2 > < ul > < li > < code class = "inline" > display_value< / code > (< code class = "inline" > :string< / code > ) (required)< / li > < li > < code class = "inline" > submit_value< / code > (< code class = "inline" > :string< / code > ) (required)< / li > < li > < code class = "inline" > ref< / code > (< code class = "inline" > :string< / code > ) (required)< / li > < li > < code class = "inline" > target< / code > (< code class = "inline" > :any< / code > )< / li > < li > < code class = "inline" > idx< / code > (< code class = "inline" > :integer< / code > ) (required)< / li > < li > < code class = "inline" > creatable< / code > (< code class = "inline" > :boolean< / code > ) - Defaults to < code class = "inline" > false< / code > .< / li > < / ul > < / div >
2023-07-12 11:28:07 +03:00
< / div >
< div class = "summary-row" >
< div class = "summary-signature" >
< a href = "#render/1" translate = "no" > render(assigns)< / a >
< / div >
2024-01-15 13:40:15 +03:00
< div class = "summary-synopsis" > < h2 > Attributes< / h2 > < ul > < li > < code class = "inline" > placeholder< / code > (< code class = "inline" > :string< / code > ) - Defaults to < code class = "inline" > " Select option or search by typing" < / code > .< / li > < li > < code class = "inline" > id< / code > (< code class = "inline" > :any< / code > ) (required)< / li > < li > < code class = "inline" > options< / code > (< code class = "inline" > :list< / code > ) - Defaults to < code class = "inline" > []< / code > .< / li > < li > < code class = "inline" > submit_name< / code > (< code class = "inline" > :string< / code > ) (required)< / li > < li > < code class = "inline" > display_value< / code > (< code class = "inline" > :string< / code > ) - Defaults to < code class = "inline" > " " < / code > .< / li > < li > < code class = "inline" > submit_value< / code > (< code class = "inline" > :string< / code > ) - Defaults to < code class = "inline" > " " < / code > .< / li > < li > < code class = "inline" > suggest_fun< / code > (< code class = "inline" > :any< / code > ) (required)< / li > < li > < code class = "inline" > suggestions_limit< / code > (< code class = "inline" > :integer< / code > )< / li > < li > < code class = "inline" > class< / code > (< code class = "inline" > :string< / code > ) - Defaults to < code class = "inline" > " " < / code > .< / li > < li > < code class = "inline" > required< / code > (< code class = "inline" > :boolean< / code > ) - Defaults to < code class = "inline" > false< / code > .< / li > < li > < code class = "inline" > creatable< / code > (< code class = "inline" > :boolean< / code > ) - Defaults to < code class = "inline" > false< / code > .< / li > < li > < code class = "inline" > errors< / code > (< code class = "inline" > :list< / code > ) - Defaults to < code class = "inline" > []< / code > .< / li > < li > < code class = "inline" > async< / code > (< code class = "inline" > :boolean< / code > ) - Defaults to < code class = "inline" > true< / code > .< / li > < li > < code class = "inline" > on_selection_made< / code > (< code class = "inline" > :any< / code > )< / li > < / ul > < / div >
2023-07-12 11:28:07 +03:00
< / div >
< div class = "summary-row" >
< div class = "summary-signature" >
< a href = "#select_option/4" translate = "no" > select_option(js \\ %JS{}, id, submit_value, display_value)< / a >
< / div >
< / div >
< div class = "summary-row" >
< div class = "summary-signature" >
< a href = "#update/2" translate = "no" > update(assigns, socket)< / a >
< / div >
2024-01-11 10:50:44 +03:00
< div class = "summary-synopsis" > < p > Callback implementation for < a href = "https://hexdocs.pm/phoenix_live_view/0.20.3/Phoenix.LiveComponent.html#c:update/2" > < code class = "inline" > Phoenix.LiveComponent.update/2< / code > < / a > .< / p > < / div >
2023-07-12 11:28:07 +03:00
< / div >
< / div >
< / section >
< section id = "functions" class = "details-list" >
< h1 class = "section-heading" >
< a class = "hover-link" href = "#functions" >
< i class = "ri-link-m" aria-hidden = "true" > < / i >
2023-07-25 10:58:48 +03:00
< / a >
2024-01-11 10:50:44 +03:00
< span class = "text" > Functions< / span >
2023-07-12 11:28:07 +03:00
< / h1 >
< div class = "functions-list" >
< section class = "detail" id = "dropdown/1" >
< div class = "detail-header" >
< a href = "#dropdown/1" class = "detail-link" title = "Link to this function" >
< i class = "ri-link-m" aria-hidden = "true" > < / i >
< span class = "sr-only" > Link to this function< / span >
< / a >
< h1 class = "signature" translate = "no" > dropdown(assigns)< / h1 >
2024-02-27 14:08:56 +03:00
< a href = "https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/combo_box.ex#L174" class = "icon-action" rel = "help" title = "View Source" >
2023-07-12 11:28:07 +03:00
< i class = "ri-code-s-slash-line" aria-hidden = "true" > < / i >
< span class = "sr-only" > View Source< / span >
< / a >
< / div >
< section class = "docstring" >
< h2 id = "dropdown/1-attributes" class = "section-heading" >
2024-01-11 10:50:44 +03:00
< a href = "#dropdown/1-attributes" class = "hover-link" >
2023-07-25 10:58:48 +03:00
< i class = "ri-link-m" aria-hidden = "true" > < / i >
2023-07-12 11:28:07 +03:00
< / a >
2024-01-11 10:50:44 +03:00
< span class = "text" > Attributes< / span >
2023-07-12 11:28:07 +03:00
< / h2 >
2023-09-04 14:45:12 +03:00
< ul > < li > < code class = "inline" > ref< / code > (< code class = "inline" > :string< / code > ) (required)< / li > < li > < code class = "inline" > suggestions< / code > (< code class = "inline" > :list< / code > ) - Defaults to < code class = "inline" > []< / code > .< / li > < li > < code class = "inline" > suggest_fun< / code > (< code class = "inline" > :any< / code > ) (required)< / li > < li > < code class = "inline" > target< / code > (< code class = "inline" > :any< / code > )< / li > < li > < code class = "inline" > creatable< / code > (< code class = "inline" > :boolean< / code > ) (required)< / li > < li > < code class = "inline" > display_value< / code > (< code class = "inline" > :string< / code > ) (required)< / li > < / ul >
2023-07-12 11:28:07 +03:00
< / section >
< / section >
< section class = "detail" id = "dropdown_anchor/1" >
< div class = "detail-header" >
< a href = "#dropdown_anchor/1" class = "detail-link" title = "Link to this function" >
< i class = "ri-link-m" aria-hidden = "true" > < / i >
< span class = "sr-only" > Link to this function< / span >
< / a >
< h1 class = "signature" translate = "no" > dropdown_anchor(assigns)< / h1 >
2024-02-27 14:08:56 +03:00
< a href = "https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/combo_box.ex#L146" class = "icon-action" rel = "help" title = "View Source" >
2023-07-12 11:28:07 +03:00
< i class = "ri-code-s-slash-line" aria-hidden = "true" > < / i >
< span class = "sr-only" > View Source< / span >
< / a >
< / div >
< section class = "docstring" >
< h2 id = "dropdown_anchor/1-attributes" class = "section-heading" >
2024-01-11 10:50:44 +03:00
< a href = "#dropdown_anchor/1-attributes" class = "hover-link" >
2023-07-25 10:58:48 +03:00
< i class = "ri-link-m" aria-hidden = "true" > < / i >
2023-07-12 11:28:07 +03:00
< / a >
2024-01-11 10:50:44 +03:00
< span class = "text" > Attributes< / span >
2023-07-12 11:28:07 +03:00
< / h2 >
< ul > < li > < code class = "inline" > id< / code > (< code class = "inline" > :any< / code > ) (required)< / li > < / ul >
< / section >
< / section >
< section class = "detail" id = "handle_event/3" >
< div class = "detail-header" >
< a href = "#handle_event/3" class = "detail-link" title = "Link to this function" >
< i class = "ri-link-m" aria-hidden = "true" > < / i >
< span class = "sr-only" > Link to this function< / span >
< / a >
< h1 class = "signature" translate = "no" > handle_event(binary, params, socket)< / h1 >
2024-02-27 14:08:56 +03:00
< a href = "https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/combo_box.ex#L274" class = "icon-action" rel = "help" title = "View Source" >
2023-07-12 11:28:07 +03:00
< i class = "ri-code-s-slash-line" aria-hidden = "true" > < / i >
< span class = "sr-only" > View Source< / span >
< / a >
< / div >
< section class = "docstring" >
2024-01-11 10:50:44 +03:00
< p > Callback implementation for < a href = "https://hexdocs.pm/phoenix_live_view/0.20.3/Phoenix.LiveComponent.html#c:handle_event/3" > < code class = "inline" > Phoenix.LiveComponent.handle_event/3< / code > < / a > .< / p >
2023-07-12 11:28:07 +03:00
< / section >
< / section >
< section class = "detail" id = "option/1" >
< div class = "detail-header" >
< a href = "#option/1" class = "detail-link" title = "Link to this function" >
< i class = "ri-link-m" aria-hidden = "true" > < / i >
< span class = "sr-only" > Link to this function< / span >
< / a >
< h1 class = "signature" translate = "no" > option(assigns)< / h1 >
2024-02-27 14:08:56 +03:00
< a href = "https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/combo_box.ex#L232" class = "icon-action" rel = "help" title = "View Source" >
2023-07-12 11:28:07 +03:00
< i class = "ri-code-s-slash-line" aria-hidden = "true" > < / i >
< span class = "sr-only" > View Source< / span >
< / a >
< / div >
< section class = "docstring" >
< h2 id = "option/1-attributes" class = "section-heading" >
2024-01-11 10:50:44 +03:00
< a href = "#option/1-attributes" class = "hover-link" >
2023-07-25 10:58:48 +03:00
< i class = "ri-link-m" aria-hidden = "true" > < / i >
2023-07-12 11:28:07 +03:00
< / a >
2024-01-11 10:50:44 +03:00
< span class = "text" > Attributes< / span >
2023-07-12 11:28:07 +03:00
< / h2 >
2023-07-21 16:59:32 +03:00
< ul > < li > < code class = "inline" > display_value< / code > (< code class = "inline" > :string< / code > ) (required)< / li > < li > < code class = "inline" > submit_value< / code > (< code class = "inline" > :string< / code > ) (required)< / li > < li > < code class = "inline" > ref< / code > (< code class = "inline" > :string< / code > ) (required)< / li > < li > < code class = "inline" > target< / code > (< code class = "inline" > :any< / code > )< / li > < li > < code class = "inline" > idx< / code > (< code class = "inline" > :integer< / code > ) (required)< / li > < li > < code class = "inline" > creatable< / code > (< code class = "inline" > :boolean< / code > ) - Defaults to < code class = "inline" > false< / code > .< / li > < / ul >
2023-07-12 11:28:07 +03:00
< / section >
< / section >
< section class = "detail" id = "render/1" >
< div class = "detail-header" >
< a href = "#render/1" class = "detail-link" title = "Link to this function" >
< i class = "ri-link-m" aria-hidden = "true" > < / i >
< span class = "sr-only" > Link to this function< / span >
< / a >
< h1 class = "signature" translate = "no" > render(assigns)< / h1 >
2024-01-15 13:40:15 +03:00
< a href = "https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/combo_box.ex#L74" class = "icon-action" rel = "help" title = "View Source" >
2023-07-12 11:28:07 +03:00
< i class = "ri-code-s-slash-line" aria-hidden = "true" > < / i >
< span class = "sr-only" > View Source< / span >
< / a >
< / div >
< section class = "docstring" >
< h2 id = "render/1-attributes" class = "section-heading" >
2024-01-11 10:50:44 +03:00
< a href = "#render/1-attributes" class = "hover-link" >
2023-07-25 10:58:48 +03:00
< i class = "ri-link-m" aria-hidden = "true" > < / i >
2023-07-12 11:28:07 +03:00
< / a >
2024-01-11 10:50:44 +03:00
< span class = "text" > Attributes< / span >
2023-07-12 11:28:07 +03:00
< / h2 >
2024-01-15 13:40:15 +03:00
< ul > < li > < code class = "inline" > placeholder< / code > (< code class = "inline" > :string< / code > ) - Defaults to < code class = "inline" > " Select option or search by typing" < / code > .< / li > < li > < code class = "inline" > id< / code > (< code class = "inline" > :any< / code > ) (required)< / li > < li > < code class = "inline" > options< / code > (< code class = "inline" > :list< / code > ) - Defaults to < code class = "inline" > []< / code > .< / li > < li > < code class = "inline" > submit_name< / code > (< code class = "inline" > :string< / code > ) (required)< / li > < li > < code class = "inline" > display_value< / code > (< code class = "inline" > :string< / code > ) - Defaults to < code class = "inline" > " " < / code > .< / li > < li > < code class = "inline" > submit_value< / code > (< code class = "inline" > :string< / code > ) - Defaults to < code class = "inline" > " " < / code > .< / li > < li > < code class = "inline" > suggest_fun< / code > (< code class = "inline" > :any< / code > ) (required)< / li > < li > < code class = "inline" > suggestions_limit< / code > (< code class = "inline" > :integer< / code > )< / li > < li > < code class = "inline" > class< / code > (< code class = "inline" > :string< / code > ) - Defaults to < code class = "inline" > " " < / code > .< / li > < li > < code class = "inline" > required< / code > (< code class = "inline" > :boolean< / code > ) - Defaults to < code class = "inline" > false< / code > .< / li > < li > < code class = "inline" > creatable< / code > (< code class = "inline" > :boolean< / code > ) - Defaults to < code class = "inline" > false< / code > .< / li > < li > < code class = "inline" > errors< / code > (< code class = "inline" > :list< / code > ) - Defaults to < code class = "inline" > []< / code > .< / li > < li > < code class = "inline" > async< / code > (< code class = "inline" > :boolean< / code > ) - Defaults to < code class = "inline" > true< / code > .< / li > < li > < code class = "inline" > on_selection_made< / code > (< code class = "inline" > :any< / code > )< / li > < / ul >
2023-07-12 11:28:07 +03:00
< / section >
< / section >
< section class = "detail" id = "select_option/4" >
< span id = "select_option/3" > < / span >
< div class = "detail-header" >
< a href = "#select_option/4" class = "detail-link" title = "Link to this function" >
< i class = "ri-link-m" aria-hidden = "true" > < / i >
< span class = "sr-only" > Link to this function< / span >
< / a >
< h1 class = "signature" translate = "no" > select_option(js \\ %JS{}, id, submit_value, display_value)< / h1 >
2024-02-27 14:08:56 +03:00
< a href = "https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/combo_box.ex#L267" class = "icon-action" rel = "help" title = "View Source" >
2023-07-12 11:28:07 +03:00
< i class = "ri-code-s-slash-line" aria-hidden = "true" > < / i >
< span class = "sr-only" > View Source< / span >
< / a >
< / div >
< section class = "docstring" >
< / section >
< / section >
< section class = "detail" id = "update/2" >
< div class = "detail-header" >
< a href = "#update/2" class = "detail-link" title = "Link to this function" >
< i class = "ri-link-m" aria-hidden = "true" > < / i >
< span class = "sr-only" > Link to this function< / span >
< / a >
< h1 class = "signature" translate = "no" > update(assigns, socket)< / h1 >
2023-09-13 15:56:18 +03:00
< a href = "https://github.com/plausible/analytics/blob/main/lib/plausible_web/live/components/combo_box.ex#L44" class = "icon-action" rel = "help" title = "View Source" >
2023-07-12 11:28:07 +03:00
< i class = "ri-code-s-slash-line" aria-hidden = "true" > < / i >
< span class = "sr-only" > View Source< / span >
< / a >
< / div >
< section class = "docstring" >
2024-01-11 10:50:44 +03:00
< p > Callback implementation for < a href = "https://hexdocs.pm/phoenix_live_view/0.20.3/Phoenix.LiveComponent.html#c:update/2" > < code class = "inline" > Phoenix.LiveComponent.update/2< / code > < / a > .< / p >
2023-07-12 11:28:07 +03:00
< / section >
< / section >
< / div >
< / section >
< footer class = "footer" >
< p >
< span class = "line" >
< button class = "a-main footer-button display-quick-switch" title = "Search HexDocs packages" >
Search HexDocs
< / button >
< a href = "Plausible.epub" title = "ePub version" >
Download ePub version
< / a >
< / span >
< / p >
< p class = "built-using" >
Built using
2024-01-16 10:41:49 +03:00
< a href = "https://github.com/elixir-lang/ex_doc" title = "ExDoc" target = "_blank" rel = "help noopener" translate = "no" > ExDoc< / a > (v0.31.1) for the
2023-07-12 11:28:07 +03:00
< a href = "https://elixir-lang.org" title = "Elixir" target = "_blank" translate = "no" > Elixir programming language< / a >
< / p >
< / footer >
< / div >
< / div >
2024-01-11 10:50:44 +03:00
< / main >
2023-07-12 11:28:07 +03:00
< / div >
< script src = "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js" > < / script >
< script > mermaid . initialize ( { startOnLoad : true } ) < / script >
< / body >
< / html >
