Advanced search bar

[roaldarbol]

To accomodate other queries, such as to follow an author by their ORCID ID, the search needs to change. The simplest solution is to have a search bar with a dropdown at the front - see how Amazon implements their search for reference.

I found an example with some code here: https://www.sliderrevolution.com/resources/css-search-box/ - find the Amazon-like Search Box. However, it does rely on JS (jQuery and bootstrap). I assume that it would still be possible to use with htmx?

[sneakers-the-rat]

I think we can do something like

<form 
  id="search-form" 
  hx-post="/search"
  hx-indicator=".search-indicator"
  hx-target="#search-results"
>
  <select name="search-type">
    <option value="journal">Journal</option>
    <option value="orcid">ORCID</option>
    <option value="keyword">Keyword</option>
  </select>
  <input 
    type="search" 
    name="search" 
    hx-target="#search-form"
    hx-trigger="input changed delay:500ms, search"
  >
</form>

I doubt that's literally it but i guarantee you it's something similar to that where:

• htmx form with a post command that goes to the search endpoint
• payload is form-encoded search type and query
• post is triggered by editing the search bar
• response to POST replaces #search-results table

see what i am saying about htmx being sick as hell