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="{{ query }}">
            </span>
            <input type="submit" value="Search" class="btn input-group-btn">
        </div>
    </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 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: '{{ query }}',
                tags: currentTags,
                mode: '{{ mode }}',
                apiClient
            }
        })
        wrapper.parentElement.replaceChild(newWrapper, wrapper)
    });
</script>