- autocomplete search, default full text search

.eslintrc.js

@@ -1,9 +1,11 @@
+// https://npmmirror.com/package/@typescript-eslint/eslint-plugin/v/5.0.1-alpha.14
 module.exports = {
     root: true,
     env: {
         es6: true,
         node: true,
     },
+    // extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/typescript/recommended", "@vue/prettier", "@vue/prettier/@typescript-eslint"],
     extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/typescript/recommended", "@vue/prettier", "@vue/prettier/@typescript-eslint"],
     parserOptions: {
         ecmaVersion: 2020,

package.json

@@ -46,7 +46,7 @@
     "prettier": "^2.2.1",
     "sass": "^1.26.5",
     "sass-loader": "^13.0.0",
-    "typescript": "^4.7.4",
+    "typescript": "~4.7.4",
     "webpack": "^5.72.1"
   }
 }

src/App2.vue

@@ -28,7 +28,7 @@
                     <!-- <router-link class="navbar-link is-arrowless" to="/services">SERVICES</router-link> -->
                 </li>
                 <li class="navbar-item">
-                    <a class="navbar-link is-arrowless" bind:href="help_url">HELP</a>
+                    <a class="navbar-link is-arrowless" v-bind:href="help_url">HELP</a>
                     <!-- <router-link class="navbar-link is-arrowless" to="/help">HELP</router-link> -->
                 </li>
                 <!-- <li class="navbar-item">
@@ -38,7 +38,7 @@
                     <a class="navbar-link is-arrowless" href="#">HELP</a>
                 </li> -->
                 <li class="navbar-item">
-                    <a class="navbar-link is-arrowless" bind:href="oai_url">OAI</a>
+                    <a class="navbar-link is-arrowless" v-bind:href="oai_url">OAI</a>
                     <!-- <router-link target="_blank" class="navbar-link is-arrowless" to="/oai">OAI</router-link> -->
                 </li>
                 <!-- 

src/components/map/map.component.ts

@@ -3,7 +3,7 @@ import { Options, Vue } from "vue-class-component";
 import { Prop } from "vue-property-decorator";
 import { LatLng, LatLngBounds, Map, MapOptions, Rectangle, tileLayer, TileLayer, CRS } from "leaflet";
 // import { LayerOptions } from "./map-options";
-import DatasetService from "../../services/dataset.service";
+// import DatasetService from "../../services/dataset.service";
 import { Subscription } from "rxjs";
 import { OaiDataset } from "@/models/oai";
 

src/components/vs-input/vs-input.ts

@@ -29,8 +29,8 @@ export default class VsInput extends Vue {
     private error = "";
     private results: Array<Dataset> = [];
     private loading = false;
-    private selectedIndex = 0;
-    private selectedDisplay = "";
+    private selectedIndex = -1;
+    // private selectedDisplay = "";
     private solr: SolrSettings = {
         core: SOLR_CORE, //"rdr_data", // SOLR.core;
         host: SOLR_HOST, //"tethys.at",
@@ -132,7 +132,7 @@ export default class VsInput extends Vue {
     }
 
     searchChanged(): void {
-        this.selectedIndex = 0;
+        this.selectedIndex = -1;
         // Let's warn the parent that a change was made
         // this.$emit("input", this.display);
         if (this.display.length >= 2) {
@@ -183,7 +183,7 @@ export default class VsInput extends Vue {
 
     onArrowDown(ev: Event): void {
         ev.preventDefault();
-        if (this.selectedIndex === null) {
+        if (this.selectedIndex === -1) {
             this.selectedIndex = 0;
             return;
         }
@@ -202,7 +202,7 @@ export default class VsInput extends Vue {
 
     onArrowUp(ev: Event): void {
         ev.preventDefault();
-        if (this.selectedIndex === null) {
+        if (this.selectedIndex === -1) {
             this.selectedIndex = this.suggestions.length - 1;
             return;
         }
@@ -211,11 +211,13 @@ export default class VsInput extends Vue {
     }
 
     onEnter(): void {
-        if (this.selectedIndex === null) {
+        if (this.selectedIndex === -1) {
             // this.$emit("nothingSelected", this.display);
-            return;
+            this.display && this.search();
+        } else {
+            this.select(this.suggestions[this.selectedIndex]);
         }
-        this.select(this.suggestions[this.selectedIndex]);
+
         // this.$emit("enter", this.display);
     }
 

src/components/vs-input/vs-input.vue

@@ -20,7 +20,8 @@
                             @keydown.tab="close"
                             v-on:focus="focus"
                         />
-                        <!-- <p>Message is: {{ display }}</p>  v-on:input="searchChanged"-->
+                        <!-- <p>Display is: {{ display }}</p> -->
+                        <!-- v-on:input="searchChanged" -->
                     </div>
 
                     <div class="control">