Update Search Feature

Author: Tinker-Twins

docs/index.html

@@ -156,47 +156,36 @@
                         d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z" />
                 </svg>
             </label>
-            <div class=md-search data-md-component=search role=dialog>
-                <label class=md-search__overlay for=__search></label>
-                <div class=md-search__inner role=search>
-                    <form class=md-search__form name=search>
-                        <input type=text class=md-search__input name=query aria-label=Search placeholder=Search
-                            autocapitalize=off autocorrect=off autocomplete=off spellcheck=false
-                            data-md-component=search-query required>
-                        <label class="md-search__icon md-icon" for=__search>
-                            <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24">
-                                <path
-                                    d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z" />
-                            </svg>
-                            <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24">
-                                <path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z" />
-                            </svg>
-                        </label>
-                        <nav class=md-search__options aria-label=Search>
-                            <a href=javascript:void(0) class="md-search__icon md-icon" title=Share aria-label=Share
-                                data-clipboard data-clipboard-text data-md-component=search-share tabindex=-1>
-                                <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24">
-                                    <path
-                                        d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7 0-.24-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91 1.61 0 2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08Z" />
-                                </svg>
-                            </a>
-                            <button type=reset class="md-search__icon md-icon" title=Clear aria-label=Clear tabindex=-1>
-                                <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24">
-                                    <path
-                                        d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z" />
-                                </svg>
-                            </button>
-                        </nav>
-                        <div class=md-search__suggest data-md-component=search-suggest></div>
+            <div class="md-search" data-md-component="search" role="dialog">
+                <label class="md-search__overlay" for="__search"></label>
+                <div class="md-search__inner" role="search">
+                    <form class="md-search__form" name="search">
+                    <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required="">
+                    <label class="md-search__icon md-icon" for="__search">
+                        
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"></path></svg>
+                        
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"></path></svg>
+                    </label>
+                    <nav class="md-search__options" aria-label="Search">
+                        
+                        <button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1" title="Clear">
+                        
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>
+                        </button>
+                    </nav>
+                    
+                        <div class="md-search__suggest" data-md-component="search-suggest"></div>
+                    
                     </form>
-                    <div class=md-search__output>
-                        <div class=md-search__scrollwrap tabindex=0 data-md-scrollfix>
-                            <div class=md-search-result data-md-component=search-result>
-                                <div class=md-search-result__meta>Initializing search </div>
-                                <ol class=md-search-result__list role=presentation></ol>
-                            </div>
+                    <div class="md-search__output">
+                    <div class="md-search__scrollwrap" tabindex="0">
+                        <div class="md-search-result" data-md-component="search-result">
+                        <div class="md-search-result__meta">Type to start searching</div>
+                        <ol class="md-search-result__list" role="list"></ol>
                         </div>
                     </div>
+                    </div>
                 </div>
             </div>
             <div class=md-header__source>