linkding/bookmarks/templates/bookmarks/search.html

<div class="search">
  <form action="" method="get" role="search">
    <div class="input-group">
            <span id="search-input-wrap">
                <input type="search" class="form-input" name="q" placeholder="Search for words or #tags"
                       value="{{ filters.query }}">
            </span>
      <input type="submit" value="Search" class="btn input-group-btn">
    </div>
    {% if filters.user %}
      <input type="hidden" name="user" value="{{ filters.user }}">
    {% endif %}
  </form>
</div>

{# Replace search input with auto-complete component #}
<script type="application/javascript">
  window.addEventListener("load", function () {
    const currentTagsString = '{{ tags_string }}';
    const currentTags = currentTagsString.split(' ');
    const uniqueTags = [...new Set(currentTags)]
    const filters = {
      q: '{{ filters.query }}',
      user: '{{ filters.user }}',
    }
    const apiClient = new linkding.ApiClient('{% url 'bookmarks:api-root' %}')
    const wrapper = document.getElementById('search-input-wrap')
    const newWrapper = document.createElement('div')
    new linkding.SearchAutoComplete({
      target: newWrapper,
      props: {
        name: 'q',
        placeholder: 'Search for words or #tags',
        value: '{{ filters.query }}',
        tags: uniqueTags,
        mode: '{{ mode }}',
        linkTarget: '{{ request.user_profile.bookmark_link_target }}',
        apiClient,
        filters,
      }
    })
    wrapper.parentElement.replaceChild(newWrapper, wrapper)
  });
</script>