Option to specify search input id attribute

[marc-bouvier]

Hello!, I would like to thank you for this tool. It was really easy for me to add and customize.

Related to #727

It could be great if we could specify the id attribute for the input generated for the search bar.
I could use it in my "Skip to content menu" to focus directly in the search input. More information about Skip to content : https://www.a11y-collective.com/blog/skip-to-main-content/

For now, I focus on the the search component's id , which require I press tab to focus the input element.

  <nav class="header-skip-content">
        <ul>
            <li><a href="#content">Content</a></li>
-            <li><a href="#search" >Search</a></li>
+            <li><a href="#search-input" >Search</a></li>
            <li><a href="#menu">Menu</a></li>
        </ul>
    </nav>
    <script>
        window.addEventListener('DOMContentLoaded', (event) => {
            new PagefindUI({
            element: "#search", 
            showSubResults: true, 
            showImages: false,
+           inputId: "search-input"
            });
        });
    </script>

Would generate :

<div id="search">
    <div class="pagefind-ui  pagefind-ui--reset">
        <form class="pagefind-ui__form " role="search" aria-label="Search on this site"
              action="javascript:void(0);">
            <input 
+                   id="search-input"
                    class="pagefind-ui__search-input " 
                    type="text"
                    placeholder="Search" 
                    autocapitalize="none" 
                    enterkeyhint="search">
            <button class="pagefind-ui__search-clear  pagefind-ui__suppressed">Cleanup</button>
            <div class="pagefind-ui__drawer  pagefind-ui__hidden"></div>
        </form>
    </div>
</div>