<% example_collection = [ OpenStruct.new(name: "Alabama", value: 1), OpenStruct.new(name: "Alaska", value: 2), OpenStruct.new(name: "Arizona", value: 3), OpenStruct.new(name: "Arkansas", value: 4), OpenStruct.new(name: "California", value: 5), OpenStruct.new(name: "Colorado", value: 6), OpenStruct.new(name: "Connecticut", value: 7), OpenStruct.new(name: "Delaware", value: 8), OpenStruct.new(name: "Florida", value: 9), OpenStruct.new(name: "Georgia", value: 10), ] %> <% example_dropdown_options = [ { label: 'United States', value: 'United States', id: 'us' }, { label: 'Canada', value: 'Canada', id: 'ca' }, { label: 'Pakistan', value: 'Pakistan', id: 'pk' }, ] %> <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %> <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %> <%= form.text_field :example_text_field, props: { label: true } %> <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %> <%= form.email_field :example_email_field, props: { label: true } %> <%= form.number_field :example_number_field, props: { label: true } %> <%= form.search_field :example_search_field, props: { label: true } %> <%= form.password_field :example_password_field, props: { label: true } %> <%= form.url_field :example_url_field, props: { label: true } %> <%= form.text_area :example_text_area, props: { label: true } %> <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options } %> <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %> <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %> <%= form.check_box :example_checkbox, data: { field1: "value1", field2: "value2" }, props: { text: "Example Checkbox", label: true }, checked_value: "yes", unchecked_value: "no", id: "checkbox-id", name: "checkbox-name", class: "checkbox-class" %> <%= form.date_picker :example_date_picker_1, props: { label: true } %> <%= form.date_picker :example_date_picker_2, props: { label: true, reset_to_default: true, default_date: "06/09/1994" } %> <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %> <%= form.actions do |action| %> <%= action.submit %> <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary", onclick: "resetDates()" } %> <% end %> <% end %> <%= javascript_tag defer: "defer" do %> document.addEventListener("pb-typeahead-kit-search", function(event) { if (!event.target.dataset || !event.target.dataset.typeaheadExample1) return; fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`) .then(response => response.json()) .then((result) => { const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]") event.detail.setResults((result.items || []).map((user) => { const wrapper = resultOptionTemplate.content.cloneNode(true) wrapper.children[0].dataset.user = JSON.stringify(user) wrapper.querySelector('slot[name="name"]').replaceWith(user.login) wrapper.querySelector('img').dataset.src = user.avatar_url return wrapper })) }) }) document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) { if (!event.target.dataset.typeaheadExample1) return; const selectedUserJSON = event.detail.selected.firstElementChild.dataset.user const selectedUserData = JSON.parse(selectedUserJSON) // set the input field's value event.target.querySelector('input[name=example_typeahead]').value = selectedUserData.login // log the selected option's dataset console.log('The selected user data:') console.dir(selectedUserData) // do even more with the data later - TBD event.target.dataset.user = selectedUserJSON }) <% end %>