More Examples :: AutoComplete :: Primer ViewComponents v0.38.0

<!-- AutoComplete with non-visible label -->
<auto-complete src="/view-components/rails-app/auto_complete?version=alpha" for="test-id-1" data-view-component="true">
  <label for="input-id-1" class="">
    <span class="sr-only">Select a fruit</span>
  </label>
  <span class="autocomplete-body">
    <input id="input-id-1" name="input-id-1" autocomplete="off" type="text" data-view-component="true" class="form-control" />
    <ul id="test-id-1" data-view-component="true" class="autocomplete-results"></ul>
  </span>
  <div id="test-id-1-feedback" class="sr-only"></div>
</auto-complete>
<!-- AutoComplete with inline label -->
<auto-complete src="/view-components/rails-app/auto_complete?version=alpha" for="test-id-2" data-view-component="true">
  <label for="input-id-2" class="autocomplete-label-inline">
    Select a fruit
  </label>
  <span class="autocomplete-body">
    <input id="input-id-2" name="input-id-2" autocomplete="off" type="text" data-view-component="true" class="form-control" />
    <ul id="test-id-2" data-view-component="true" class="autocomplete-results"></ul>
  </span>
  <div id="test-id-2-feedback" class="sr-only"></div>
</auto-complete>
<!-- AutoComplete with search icon -->
<auto-complete src="/view-components/rails-app/auto_complete?version=alpha" for="test-id-3" data-view-component="true">
  <label for="input-id-3" class="autocomplete-label-stacked">
    Select a fruit
  </label>
  <span class="autocomplete-body">
    <div class="form-control autocomplete-embedded-icon-wrap">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search">
        <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path>
      </svg>
      <input id="input-id-3" name="input-id-3" autocomplete="off" type="text" data-view-component="true" class="form-control" />
    </div>
    <ul id="test-id-3" data-view-component="true" class="autocomplete-results"></ul>
  </span>
  <div id="test-id-3-feedback" class="sr-only"></div>
</auto-complete>
<!-- AutoComplete with clear button -->
<auto-complete src="/view-components/rails-app/auto_complete?version=alpha" for="test-id-4" data-view-component="true">
  <label for="input-id-4" class="autocomplete-label-stacked">
    Select a fruit
  </label>
  <span class="autocomplete-body">
    <input id="input-id-4" name="input-id-4" autocomplete="off" type="text" data-view-component="true" class="form-control" />
    <button id="input-id-4-clear" class="btn-octicon" aria-label="Clear"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x">
        <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path>
      </svg></button>
    <ul id="test-id-4" data-view-component="true" class="autocomplete-results"></ul>
  </span>
  <div id="test-id-4-feedback" class="sr-only"></div>
</auto-complete>

# AutoComplete with non-visible label
# rubocop:disable Primer/ComponentNameMigration
render(
  Primer::Alpha::AutoComplete.new(
    label_text: "Select a fruit",
    input_id: "input-id-1",
    list_id: "test-id-1",
    src: UrlHelpers.autocomplete_index_path(version: "alpha"),
    is_label_visible: false
  )
)
# rubocop:enable Primer/ComponentNameMigration
# AutoComplete with inline label
# rubocop:disable Primer/ComponentNameMigration
render(
  Primer::Alpha::AutoComplete.new(
    label_text: "Select a fruit",
    input_id: "input-id-2",
    list_id: "test-id-2",
    src: UrlHelpers.autocomplete_index_path(version: "alpha"),
    is_label_inline: true
  )
)
# rubocop:enable Primer/ComponentNameMigration
# AutoComplete with search icon
# rubocop:disable Primer/ComponentNameMigration
render(
  Primer::Alpha::AutoComplete.new(
    label_text: "Select a fruit",
    input_id: "input-id-3",
    list_id: "test-id-3",
    src: UrlHelpers.autocomplete_index_path(version: "alpha"),
    with_icon: true
  )
)
# rubocop:enable Primer/ComponentNameMigration
# AutoComplete with clear button
# rubocop:disable Primer/ComponentNameMigration
render(
  Primer::Alpha::AutoComplete.new(
    label_text: "Select a fruit",
    input_id: "input-id-4",
    list_id: "test-id-4",
    src: UrlHelpers.autocomplete_index_path(version: "alpha"),
    is_clearable: true
  )
)
# rubocop:enable Primer/ComponentNameMigration

app/components/primer/alpha/auto_complete.css

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

/* autocomplete */
/* This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796
** AutoComplete relies on FormControl, Overlay and ActionList CSS */
/* Stacked label (default) */
.autocomplete-label-stacked {
  display: block;
  margin-bottom: var(--base-size-6);
}
/* Inline label (non-default) */
.autocomplete-label-inline {
  display: inline;
  margin-right: var(--base-size-6);
}
/* Switch to stacked at smaller viewport */
@media (max-width: 543.98px) {
  .autocomplete-label-inline {
    display: block;
    margin-bottom: var(--base-size-6);
  }
}
/* Wrapper for the input and result elements to ensure alignment */
.autocomplete-body {
  position: relative;
  display: inline;
}
/* Wrapper and conditional styles for when an icon is added */
.autocomplete-embedded-icon-wrap {
  display: inline-flex;
  padding: var(--base-size-4) var(--base-size-8);
  align-items: center;
}
.autocomplete-embedded-icon-wrap:focus-within {
    border-color: var(--borderColor-accent-emphasis);
    border-color: var(--focus-outlineColor);
    outline: none;
    box-shadow: inset 0 0 0 1px var(--focus-outlineColor);
  }
.autocomplete-embedded-icon-wrap .form-control {
    padding: 0;
    margin-left: var(--base-size-8);
    border: none;
    box-shadow: none;
  }
:is(.autocomplete-embedded-icon-wrap .form-control):focus {
      box-shadow: none;
    }
:is(.autocomplete-embedded-icon-wrap .form-control):focus-visible {
      box-shadow: none;
    }
/* A pop up list of items used to show autocompleted results */
.autocomplete-results {
  position: absolute;
  left: 0;
  z-index: 99;
  width: max-content;
  min-width: 100%;
  max-height: 20em;
  overflow-y: auto;
  font-size: var(--text-codeBlock-size);
  list-style: none;
  background: var(--overlay-bgColor);
  border: var(--borderWidth-thin) solid var(--borderColor-default);
  border-radius: var(--borderRadius-medium);
  box-shadow: var(--shadow-resting-medium);
}
/* One of the items that appears within an autocomplete group
** Bold black text on white background */
.autocomplete-item {
  display: block;
  width: 100%;
  padding: var(--base-size-4) var(--base-size-8);
  overflow: hidden;
  font-weight: var(--base-text-weight-semibold);
  color: var(--fgColor-default);
  text-align: left;
  -webkit-text-decoration: none;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  background-color: var(--overlay-bgColor);
  border: 0;
}
.autocomplete-item:hover {
    color: var(--fgColor-onEmphasis);
    -webkit-text-decoration: none;
    text-decoration: none;
    background-color: var(--bgColor-accent-emphasis);
    /* Inherit color on all child elements to ensure enough contrast */
  }
.autocomplete-item:hover * {
      color: inherit !important;
    }
.autocomplete-item.selected,.autocomplete-item[aria-selected='true'],.autocomplete-item.navigation-focus {
    color: var(--fgColor-onEmphasis);
    -webkit-text-decoration: none;
    text-decoration: none;
    background-color: var(--bgColor-accent-emphasis);
    /* Inherit color on all child elements to ensure enough contrast */
  }
:is(.autocomplete-item.selected,.autocomplete-item[aria-selected='true'],.autocomplete-item.navigation-focus) * {
      color: inherit !important;
    }

No matching results.

No matching results.

app/components/primer/alpha/auto_complete.css

Embed Code

Embed URL

Previews

No matching results.

Pages

No matching results.