<%= pb_rails("typeahead", props: {
label: "user",
name: :foo,
data: { typeahead_example: true },
input_options: {
classname: "my-typeahead-class",
data: {
typeahead_testing: "data field test"
},
id: "typeahead-input-id-test",
},
})%>
<%= pb_rails("card", props: { padding: "xl", data: { typeahead_example_selected_option: true } }) do %>
<%= pb_rails("body") do %>
Use the above input to search for users on Github, and see the results as you type.
<% end %>
<%= pb_rails("body") do %>
When you make a selection, you will see it appear in the list below
<% end %>
<% end %>
<%= pb_rails("user", props: {
name: tag(:slot, name: "name"),
orientation: "horizontal",
align: "left",
avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
avatar: true
}) %>
<%= javascript_tag defer: "defer" do %>
document.addEventListener("pb-typeahead-kit-search", function(event) {
if (!event.target.dataset || !event.target.dataset.typeaheadExample) 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.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.typeaheadExample) return;
document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").innerHTML = ""
document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").innerHTML = event.detail.selected.innerHTML
})
<% end %>