Sha256: b88d1747e5222e3c560ef444bcfbf29ccd574708f16f3494575d55ec94b01e47

Contents?: true

Size: 1.31 KB

Versions: 1748

Compression:

Stored size: 1.31 KB

Contents

<%= pb_rails("typeahead", props: {
  async: true,
  get_option_label: 'getOptionLabel',
  get_option_value: 'getOptionValue',
  load_options: 'asyncPillsPromiseOptions',
  label: "Github Users",
  name: :foo,
  pills: true,
  placeholder: "type the name of a Github user"
}) %>

<!-- This section is an example of how to provide load_options prop for using dynamic options -->
<%= javascript_tag defer: "defer" do %>
  // Simple filter function, providing a list of results in the expected data format

  const filterResults = function(results) {
    return results.items.map(function(result) {
      return {
        name: result.login,
        id: result.id,
      }
    })
  }

  /* Note: Make sure you assign this to window or a namespace within window
  or it will not be accessible to the kit! */

  window.asyncPillsPromiseOptions = function(inputValue) {
    return new Promise(function(resolve) {
      if (inputValue) {
        fetch(`https://api.github.com/search/users?q=${inputValue}`)
          .then(function(response) { return response.json() })
          .then(function(results) { resolve(filterResults(results))})
      } else {
        resolve([])
      }
    })
  }

  window.getOptionLabel = function(option) {
    return option.name;
  }
  window.getOptionValue = function(option) {
    return option.id;
  }
<% end %>

Version data entries

1,748 entries across 1,748 versions & 2 rubygems

Version Path
playbook_ui-8.3.0.alpha.select.pre.margin app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb
playbook_ui-8.3.0 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb
playbook_ui-8.2.1.pre.alpha5 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb
playbook_ui-8.2.1.pre.alpha4 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb
playbook_ui-8.2.1.alpha.iconacc app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb
playbook_ui-8.2.1.pre.alpha3 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb
playbook_ui-8.2.1.pre.alpha2 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb
playbook_ui-8.3.0.deps2 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb
playbook_ui-8.3.0.pre.alpha1 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb
playbook_ui-8.2.1.pre.alpha1 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb
playbook_ui-8.2.1 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb
playbook_ui-8.1.3 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb
playbook_ui-8.4.0.alpha.dependencies.2 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb
playbook_ui-8.4.0.alpha.dependencies.1 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb
playbook_ui-8.2.0.pre.alpha4 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb
playbook_ui-8.2.0.pre.alpha3 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb
playbook_ui-8.2.0 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb
playbook_ui-8.1.2 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb
playbook_ui-8.1.0.pre.alpha1 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb
playbook_ui-8.0.3 app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb