Update Search.astro

Author: ckvv

src/components/Search.astro

@@ -8,39 +8,32 @@ type Props = {
 const { placeholder = '搜索' } = Astro.props;
 ---
 
-<astro-sarch>
-  <div>
-    <div class="mt-2">
-      <div class="flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 has-[input:focus-within]:outline-blue-600">
-        <SearchSVG class="shrink-0 text-base text-gray-500 select-none sm:text-sm/6" />
-        <input type="text" class="block min-w-0 grow py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6" placeholder={placeholder} />
-        <div class="flex shrink-0 focus-within:relative">
-          <select class="col-start-1 row-start-1 w-full appearance-none rounded-md py-1.5 pr-7 pl-3 text-base text-gray-500 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6">
-            <option>GitHub</option>
-            <option>Google</option>
-          </select>
-        </div>
-      </div>
+<div class="mt-2">
+  <div class="flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 has-[input:focus-within]:outline-blue-600">
+    <SearchSVG class="shrink-0 text-base text-gray-500 select-none sm:text-sm/6" />
+    <input data-astro-search-input type="text" class="block min-w-0 grow py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6" placeholder={placeholder} />
+    <div class="flex shrink-0 focus-within:relative">
+      <select data-astro-search-select class="col-start-1 row-start-1 w-full appearance-none rounded-md py-1.5 pr-7 pl-3 text-base text-gray-500 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6">
+        <option>GitHub</option>
+        <option>Google</option>
+      </select>
+      <button data-astro-search-button class="flex items-center text-white bg-blue-500 rounded-md px-2">Search</button>
     </div>
   </div>
-</astro-sarch>
+</div>
 
 <script>
-  // 为我们的新 HTML 自定义元素定义行为。
-  class AstroSearch extends HTMLElement {
-    connectedCallback() {
-      const searchInput = this.querySelector('input') as HTMLInputElement;
-      const select = this.querySelector('select');
-      searchInput.addEventListener('keydown', (e) => {
-        if (e.key === 'Enter') {
-          window.open(select?.value === 'GitHub'
-            ? `https://github.com/ckvv/ckvv.github.io/search?l=Markdown&q=${searchInput.value}`
-            : `https://www.google.com/search?q=site:${window.location.host} ${searchInput.value}`);
-        }
-      });
-    }
+const searchInput = document.querySelector('[data-astro-search-input]') as HTMLInputElement;
+const select = document.querySelector('[data-astro-search-select]') as HTMLSelectElement;
+function search() {
+  window.open(select?.value === 'GitHub'
+    ? `https://github.com/ckvv/ckvv.github.io/search?l=Markdown&q=${searchInput.value}`
+    : `https://www.google.com/search?q=site:${window.location.host} ${searchInput.value}`);
+}
+searchInput.addEventListener('keyup', (e) => {
+  if (e.key === 'Enter') {
+    search();
   }
-
-  // 告诉浏览器将我们的 AstroHeart 类用于 <astro-heart> 元素。
-  customElements.define('astro-sarch', AstroSearch);
+});
+(document.querySelector('[data-astro-search-button]') as HTMLButtonElement).addEventListener('click', search);
 </script>