class Primer::Beta::AutoComplete

be used unless there is compelling reason not to. A placeholder is not a label.
However, please note that a visible label should almost always
* If you must hide the label, set ‘visually_hide_label` to `true`.
* `label_text` is required and visible by default.
Always set an accessible label to help the user interact with the component.
@accessibility
input field. This list is populated by server search results.
Use `AutoComplete` to provide a user with a list of selectable suggestions that appear when they type into the

def before_render

add `input` and `results` without needing to explicitly call them in the view 
def before_render
  with_results(classes: "") unless results?
  with_input(classes: "") unless input?
end

def initialize(label_text:, src:, list_id:, input_id:, input_name: nil, placeholder: nil, show_clear_button: false, visually_hide_label: false, size: DEFAULT_SIZE, full_width: false, width: DEFAULT_WIDTH, disabled: false, invalid: false, inset: false, monospace: false, **system_arguments)

Parameters:
  • monospace (Boolean) -- monospace input font family
  • inset (Boolean) -- subtle input background color
  • placeholder (String) -- The placeholder text displayed within the input
  • invalid (Boolean) -- Invalid input
  • disabled (Boolean) -- Disabled input
  • width (String) -- Optional parameter to set max width of results list. <%= one_of(Primer::Beta::AutoComplete::WIDTH_OPTIONS) %>
  • full_width (Boolean) -- Input can be full-width or fit to content
  • size (Hash) -- Input size can be small, medium (default), or large
  • system_arguments (Hash) -- <%= link_to_system_arguments_docs %>
  • show_clear_button (Boolean) -- Adds optional clear button.
  • visually_hide_label (Boolean) -- Controls if the label is visible. If `true`, screen reader only text will be added.
  • list_id (String) -- Id of the list element.
  • input_name (String) -- Optional name of the input element, defaults to `input_id` when not set.
  • input_id (String) -- Id of the input element.
  • src (String) -- The route to query.
  • label_text (String) -- The label of the input. 
def initialize(label_text:, src:, list_id:, input_id:, input_name: nil, placeholder: nil, show_clear_button: false, visually_hide_label: false, size: DEFAULT_SIZE, full_width: false, width: DEFAULT_WIDTH, disabled: false, invalid: false, inset: false, monospace: false, **system_arguments)
  @label_text = label_text
  @list_id = list_id
  @input_id = input_id
  @input_name = input_name || input_id
  @placeholder = placeholder
  @visually_hide_label = visually_hide_label
  @show_clear_button = show_clear_button
  @system_arguments = deny_tag_argument(**system_arguments)
  @system_arguments[:tag] = "auto-complete"
  @system_arguments[:src] = src
  @system_arguments[:for] = list_id
  @disabled = disabled
  @invalid = invalid
  @size = size
  @inset = inset
  @monospace = monospace
  @full_width = full_width
  @width = width
  @field_wrap_classes = class_names(
    "FormControl-input-wrap",
    SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, DEFAULT_SIZE)],
    "FormControl-input-wrap--trailingAction": show_clear_button
  )
  @form_group_classes = class_names(
    "FormControl",
    "FormControl--fullWidth": full_width
  )
  @overlay_classes = class_names(
    "Overlay",
    "Overlay--height-auto",
    WIDTH_MAPPINGS[fetch_or_fallback(WIDTH_OPTIONS, @width, DEFAULT_WIDTH)]
  )
end