src/components/SearchInput.vue

   1 <template>
   2   <div class="search-bar">
   3     <label for="search" class="search-label"></label>
   4     <input
   5       type="text"
   6       ref="search"
   7       :value="value"
   8       @input="search($event.target.value)"
   9       @keyup.enter.exact="$emit('search-open')"
  10       @keyup.alt.enter="$emit('search-open', '_blank')"
  11     />
  12   </div>
  13 </template>
  14
  15 <script>
  16 export default {
  17   name: "SearchInput",
  18   props: ["value"],
  19   mounted() {
  20     this._keyListener = function (event) {
  21       if (event.key === "/") {
  22         event.preventDefault();
  23         this.focus();
  24       }
  25       if (event.key === "Escape") {
  26         this.cancel();
  27       }
  28     };
  29     document.addEventListener("keydown", this._keyListener.bind(this));
  30
  31     // fill seach from get parameter.
  32     const search = new URLSearchParams(window.location.search).get("search");
  33     if (search) {
  34       this.$refs.search.value = search;
  35       this.search(search);
  36       this.focus();
  37     }
  38   },
  39   methods: {
  40     focus: function () {
  41       this.$emit("search-focus");
  42       this.$nextTick(() => {
  43         this.$refs.search.focus();
  44       });
  45     },
  46     setSearchURL: function (value) {
  47       const url = new URL(window.location);
  48       if (value === "") {
  49         url.searchParams.delete("search");
  50       } else {
  51         url.searchParams.set("search", value);
  52       }
  53       window.history.replaceState("search", null, url);
  54     },
  55     cancel: function () {
  56       this.setSearchURL("");
  57       this.$refs.search.value = "";
  58       this.$refs.search.blur();
  59       this.$emit("search-cancel");
  60     },
  61     search: function (value) {
  62       this.setSearchURL(value);
  63       this.$emit("input", value.toLowerCase());
  64     },
  65   },
  66   beforeDestroy() {
  67     document.removeEventListener("keydown", this._keyListener);
  68   },
  69 };
  70 </script>
  71
  72 <style lang="scss" scoped></style>