Real-time Search with Phoenix LiveView and Tailwind

Learning Resources Guides/Tuts/Tips/Info
21

Hi @caspg , Following up on my previous reply:

Ok, the staging site is up. The search bar on this page:

I have only added the search to that page currently (turned out I needed to put it in templates other than app.html.heex, so just trying to get it working on /plays first.)

On a possibly related note, I keep wondering about this, so I should ask: Is this the only socket I need in my lib/mono_phoenix_v01_web/endpoint.ex?

socket("/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]])

Will that socket handle the search too, or do I need to add another for the search?

Anyway, thanks for helping me try to find the cause of the Parameters: :not_mounted_at_router and `unknown hook found for ā€œSearchBarā€ issues!

Please let me know if I should post the contents of any other files.

22

Getting a 404 on /plays ā€¦

23

Yeah, Iā€™ve switched to working on a different solution for search. Thatā€™s just a staging site, I pushed that commit to check something not on that route. Thanks for the note though.

That route works on production, which is here if youā€™re curious: The Plays Ā· Shakespeare's Monologues (search function not yet added there.)

24

No problem, Iā€™m working on the same problem so was just curious as to how you solved it.

25

That is awesome, thanks for sharing! :heart_hands:

How did you implement the shortcut for the keyboard search ctrl+k?

26

This is the Hook Iā€™ve used:

let keysPressed: { [key in string]: boolean } = {}

function handleMetaKeydown(event: KeyboardEvent) {
  if (event.key === 'Control') {
    keysPressed[event.key] = true
    return
  }

  if ((keysPressed['Control'] || event.metaKey) && event.key === 'k') {
    event.preventDefault()

    document.getElementById('searbar-open-button')?.click()
  }
}

function handleMetaKeyUp(event: KeyboardEvent) {
  if (event.key === 'Control' || event.key === 'Meta') {
    delete keysPressed[event.key]
    return
  }
}

export const SearchBar = {
  mounted() {
    document.addEventListener('keydown', handleMetaKeydown)
    document.addEventListener('keyup', handleMetaKeyUp)
  },
  destroyed() {
    document.removeEventListener('keydown', handleMetaKeydown)
    document.removeEventListener('keyup', handleMetaKeyUp)
  },
}
1 Like
27

Um, this is the most incredible thread. I needed all of this!

Iā€™m going to add my addition as Iā€™m caching my searches but couldnā€™t contain my appreciation for all of your examples!

1 Like
28

Hi @caspg, is it possible to see the code file which is displaying map using MapLibre. I am new to Phoenix and am thinking of creating a test project with maps. Any help will be much appreciated.

29

Thereā€™s a small typo on each parkā€™s page, under the title of, Useful Links, thereā€™s a ā€œreport this place or its dataā€ which has a typo. See palce instead of place.

Great work, thanks again for sharing!