- autocomplete vor search inputs

- composer updates

composer.lock

@@ -1053,16 +1053,16 @@
         },
         {
             "name": "mcamara/laravel-localization",
-            "version": "1.4.5",
+            "version": "1.4.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/mcamara/laravel-localization.git",
-                "reference": "4350fdbd4e4da04510a77cf9fd19614233c500f6"
+                "reference": "72a22855d4617ad667eec2565540da2e7158c2c5"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/mcamara/laravel-localization/zipball/4350fdbd4e4da04510a77cf9fd19614233c500f6",
+                "url": "https://api.github.com/repos/mcamara/laravel-localization/zipball/72a22855d4617ad667eec2565540da2e7158c2c5",
-                "reference": "4350fdbd4e4da04510a77cf9fd19614233c500f6",
+                "reference": "72a22855d4617ad667eec2565540da2e7158c2c5",
                 "shasum": ""
             },
             "require": {
@@ -1111,7 +1111,7 @@
                 "localization",
                 "php"
             ],
-            "time": "2019-10-17T20:28:46+00:00"
+            "time": "2019-10-25T08:31:04+00:00"
         },
         {
             "name": "monolog/monolog",
@@ -1260,16 +1260,16 @@
         },
         {
             "name": "nikic/php-parser",
-            "version": "v4.2.4",
+            "version": "v4.2.5",
             "source": {
                 "type": "git",
                 "url": "https://github.com/nikic/PHP-Parser.git",
-                "reference": "97e59c7a16464196a8b9c77c47df68e4a39a45c4"
+                "reference": "b76bbc3c51f22c570648de48e8c2d941ed5e2cf2"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/nikic/PHP-Parser/zipball/97e59c7a16464196a8b9c77c47df68e4a39a45c4",
+                "url": "https://api.github.com/repos/nikic/PHP-Parser/zipball/b76bbc3c51f22c570648de48e8c2d941ed5e2cf2",
-                "reference": "97e59c7a16464196a8b9c77c47df68e4a39a45c4",
+                "reference": "b76bbc3c51f22c570648de48e8c2d941ed5e2cf2",
                 "shasum": ""
             },
             "require": {
@@ -1277,6 +1277,7 @@
                 "php": ">=7.0"
             },
             "require-dev": {
+                "ircmaxell/php-yacc": "0.0.4",
                 "phpunit/phpunit": "^6.5 || ^7.0 || ^8.0"
             },
             "bin": [
@@ -1307,7 +1308,7 @@
                 "parser",
                 "php"
             ],
-            "time": "2019-09-01T07:51:21+00:00"
+            "time": "2019-10-25T18:33:07+00:00"
         },
         {
             "name": "opis/closure",
@@ -1562,16 +1563,16 @@
         },
         {
             "name": "psr/log",
-            "version": "1.1.0",
+            "version": "1.1.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/php-fig/log.git",
-                "reference": "6c001f1daafa3a3ac1d8ff69ee4db8e799a654dd"
+                "reference": "bf73deb2b3b896a9d9c75f3f0d88185d2faa27e2"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/php-fig/log/zipball/6c001f1daafa3a3ac1d8ff69ee4db8e799a654dd",
+                "url": "https://api.github.com/repos/php-fig/log/zipball/bf73deb2b3b896a9d9c75f3f0d88185d2faa27e2",
-                "reference": "6c001f1daafa3a3ac1d8ff69ee4db8e799a654dd",
+                "reference": "bf73deb2b3b896a9d9c75f3f0d88185d2faa27e2",
                 "shasum": ""
             },
             "require": {
@@ -1580,7 +1581,7 @@
             "type": "library",
             "extra": {
                 "branch-alias": {
-                    "dev-master": "1.0.x-dev"
+                    "dev-master": "1.1.x-dev"
                 }
             },
             "autoload": {
@@ -1605,7 +1606,7 @@
                 "psr",
                 "psr-3"
             ],
-            "time": "2018-11-20T15:27:04+00:00"
+            "time": "2019-10-25T08:06:51+00:00"
         },
         {
             "name": "psr/simple-cache",
@@ -3147,21 +3148,23 @@
         },
         {
             "name": "tijsverkoyen/css-to-inline-styles",
-            "version": "2.2.1",
+            "version": "2.2.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/tijsverkoyen/CssToInlineStyles.git",
-                "reference": "0ed4a2ea4e0902dac0489e6436ebcd5bbcae9757"
+                "reference": "dda2ee426acd6d801d5b7fd1001cde9b5f790e15"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/tijsverkoyen/CssToInlineStyles/zipball/0ed4a2ea4e0902dac0489e6436ebcd5bbcae9757",
+                "url": "https://api.github.com/repos/tijsverkoyen/CssToInlineStyles/zipball/dda2ee426acd6d801d5b7fd1001cde9b5f790e15",
-                "reference": "0ed4a2ea4e0902dac0489e6436ebcd5bbcae9757",
+                "reference": "dda2ee426acd6d801d5b7fd1001cde9b5f790e15",
                 "shasum": ""
             },
             "require": {
+                "ext-dom": "*",
+                "ext-libxml": "*",
                 "php": "^5.5 || ^7.0",
-                "symfony/css-selector": "^2.7 || ^3.0 || ^4.0"
+                "symfony/css-selector": "^2.7 || ^3.0 || ^4.0 || ^5.0"
             },
             "require-dev": {
                 "phpunit/phpunit": "^4.8.35 || ^5.7 || ^6.0"
@@ -3190,7 +3193,7 @@
             ],
             "description": "CssToInlineStyles is a class that enables you to convert HTML-pages/files into HTML-pages/files with inline styles. This is very useful when you're sending emails.",
             "homepage": "https://github.com/tijsverkoyen/CssToInlineStyles",
-            "time": "2017-11-27T11:13:29+00:00"
+            "time": "2019-10-24T08:53:34+00:00"
         },
         {
             "name": "vlucas/phpdotenv",
@@ -3251,16 +3254,16 @@
         },
         {
             "name": "yajra/laravel-datatables-oracle",
-            "version": "v9.7.0",
+            "version": "v9.7.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/yajra/laravel-datatables.git",
-                "reference": "bb6ff7b76bd6253396cb7a5a7b6c51c5ab14b1a8"
+                "reference": "787eb04e59d754c453e6ed4185073195bc01d967"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/yajra/laravel-datatables/zipball/bb6ff7b76bd6253396cb7a5a7b6c51c5ab14b1a8",
+                "url": "https://api.github.com/repos/yajra/laravel-datatables/zipball/787eb04e59d754c453e6ed4185073195bc01d967",
-                "reference": "bb6ff7b76bd6253396cb7a5a7b6c51c5ab14b1a8",
+                "reference": "787eb04e59d754c453e6ed4185073195bc01d967",
                 "shasum": ""
             },
             "require": {
@@ -3318,7 +3321,7 @@
                 "jquery",
                 "laravel"
             ],
-            "time": "2019-10-02T05:58:48+00:00"
+            "time": "2019-10-24T03:50:05+00:00"
         },
         {
             "name": "zizaco/entrust",
@@ -4491,16 +4494,16 @@
         },
         {
             "name": "phpunit/phpunit",
-            "version": "7.5.16",
+            "version": "7.5.17",
             "source": {
                 "type": "git",
                 "url": "https://github.com/sebastianbergmann/phpunit.git",
-                "reference": "316afa6888d2562e04aeb67ea7f2017a0eb41661"
+                "reference": "4c92a15296e58191a4cd74cff3b34fc8e374174a"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/sebastianbergmann/phpunit/zipball/316afa6888d2562e04aeb67ea7f2017a0eb41661",
+                "url": "https://api.github.com/repos/sebastianbergmann/phpunit/zipball/4c92a15296e58191a4cd74cff3b34fc8e374174a",
-                "reference": "316afa6888d2562e04aeb67ea7f2017a0eb41661",
+                "reference": "4c92a15296e58191a4cd74cff3b34fc8e374174a",
                 "shasum": ""
             },
             "require": {
@@ -4571,7 +4574,7 @@
                 "testing",
                 "xunit"
             ],
-            "time": "2019-09-14T09:08:39+00:00"
+            "time": "2019-10-28T10:37:36+00:00"
         },
         {
             "name": "sebastian/code-unit-reverse-lookup",
@@ -5141,16 +5144,16 @@
         },
         {
             "name": "seld/jsonlint",
-            "version": "1.7.1",
+            "version": "1.7.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/Seldaek/jsonlint.git",
-                "reference": "d15f59a67ff805a44c50ea0516d2341740f81a38"
+                "reference": "e2e5d290e4d2a4f0eb449f510071392e00e10d19"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/Seldaek/jsonlint/zipball/d15f59a67ff805a44c50ea0516d2341740f81a38",
+                "url": "https://api.github.com/repos/Seldaek/jsonlint/zipball/e2e5d290e4d2a4f0eb449f510071392e00e10d19",
-                "reference": "d15f59a67ff805a44c50ea0516d2341740f81a38",
+                "reference": "e2e5d290e4d2a4f0eb449f510071392e00e10d19",
                 "shasum": ""
             },
             "require": {
@@ -5186,7 +5189,7 @@
                 "parser",
                 "validator"
             ],
-            "time": "2018-01-24T12:46:19+00:00"
+            "time": "2019-10-24T14:27:39+00:00"
         },
         {
             "name": "seld/phar-utils",
@@ -5234,16 +5237,16 @@
         },
         {
             "name": "squizlabs/php_codesniffer",
-            "version": "3.5.1",
+            "version": "3.5.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/squizlabs/PHP_CodeSniffer.git",
-                "reference": "82cd0f854ceca17731d6d019c7098e3755c45060"
+                "reference": "65b12cdeaaa6cd276d4c3033a95b9b88b12701e7"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/squizlabs/PHP_CodeSniffer/zipball/82cd0f854ceca17731d6d019c7098e3755c45060",
+                "url": "https://api.github.com/repos/squizlabs/PHP_CodeSniffer/zipball/65b12cdeaaa6cd276d4c3033a95b9b88b12701e7",
-                "reference": "82cd0f854ceca17731d6d019c7098e3755c45060",
+                "reference": "65b12cdeaaa6cd276d4c3033a95b9b88b12701e7",
                 "shasum": ""
             },
             "require": {
@@ -5281,7 +5284,7 @@
                 "phpcs",
                 "standards"
             ],
-            "time": "2019-10-16T21:14:26+00:00"
+            "time": "2019-10-28T04:36:32+00:00"
         },
         {
             "name": "symfony/filesystem",

public/.user.ini

@@ -1,4 +1,4 @@
 ; Override value of upload_max_filesize
-upload_max_filesize = 6M
+upload_max_filesize = 100M
-post_max_size =6M
+post_max_size = 100M
-memory_limit = 100M
+memory_limit = 128M

resources/js/search/App.vue

@@ -22,7 +22,7 @@
         <!-- Search input section -->
         <div class="row">
           <div class="twelve columns">
-            <vs-input @search="onSearch"></vs-input>
+            <vs-input @search="onSearch"  title="searching solr datasets"    placeholder="Enter your search term..."></vs-input>
           </div>
         </div>
 

resources/js/search/app-class.ts

@@ -31,7 +31,7 @@ export default class App extends Vue {
   numFound: number;
 
   async onPaginate(start: number): Promise<void> {
-    console.log(start);
+    // console.log(start);
     var res = await rdrApi.search(this.searchTerm, this.activeFilterItems, start.toString());
     this.results = res.response.docs;
   }
@@ -65,9 +65,9 @@ export default class App extends Vue {
             if (filter.value == facetValue) {
               rObj = filter;
             } else if (this.facets[prop].some(e => e.value === facetValue)) {
-              console.log(facetValue + " is included")
+              // console.log(facetValue + " is included")
               var indexOfFacetValue = this.facets[prop].findIndex(i => i.value === facetValue);
-              console.log(indexOfFacetValue);
+              // console.log(indexOfFacetValue);
               rObj = this.facets[prop][indexOfFacetValue];
               rObj.count = facet_fields[prop][i + 1];
             } else {

resources/js/search/search-results/dataservice.ts

@@ -32,12 +32,12 @@ export default {
     var limit = "&rows=" + SOLR_CONFIG["limit"];  
     // var limit = solrConfig.limit;
 
-    var dismaxFields = "title^3 abstract^2 subject^1";
+    var qfFields = "title^3 author^3 subject^2";
     var params = "fl=" + fields;
     if (term == "*%3A*") {
       params += "&defType=edismax&wt=json&indent=on"; //edismax
     } else {
-      params += "&defType=dismax&qf=" + dismaxFields + "&wt=json&indent=on"; //dismax
+      params += "&defType=dismax&qf=" + qfFields + "&wt=json&indent=on"; //dismax
     }
 
     if (start === undefined) start = "0";
@@ -70,6 +70,39 @@ export default {
     let res = await axios.get(api);
     // let { data } = res.data;
     return res.data;//.response;//.docs;
+  },
+
+  async searchTerm(term: string): Promise<any> {
+    // solr endpoint
+    // const host = 'http://voyagerdemo.com/';
+    const host = 'https://repository.geologie.ac.at/';
+    const path = 'solr/rdr_data/select?';
+    var base = host + path;
+
+    //const fields = 'id,server_date_published,abstract_output,title_output,title_additional,author,subject'; // fields we want returned
+    var fields = ["id",
+      "server_date_published",
+      "abstract_output",
+      "title_output",
+      "title_additional",
+      "author",
+      "subject"].toString();
+   
+
+    //var dismaxFields = "title^3 abstract^2 subject^1";
+    var qfFields = "title^3 author^2 subject^1";
+    var params = "fl=" + fields;
+    // if (term == "*%3A*") {
+    //   params += "&defType=edismax&wt=json&indent=on"; //edismax
+    // } else {
+      params += "&defType=edismax&qf=" + qfFields + "&wt=json&indent=on"; //dismax
+    // }  
+
+    var query = "&q=" + term + "*";
+    var api = base + params + query;
+
+    let res = await axios.get(api);    
+    return res.data;//.response;//.docs;
   }
 
 }

resources/js/search/search-results/vs-pagination-class.ts

@@ -1,5 +1,5 @@
-import { Vue, Component, Prop } from 'vue-property-decorator';
+import { Component, Prop } from 'vue-property-decorator';
-// import Vue from "vue";
+import Vue from "vue";
 
 @Component
 export default class VsPagination extends Vue {

resources/js/search/text-search/vs-input-class.ts

@@ -1,12 +1,263 @@
 import Vue from "vue";
-import { Component, Provide } from "vue-property-decorator";
+import { Component, Prop, Watch } from 'vue-property-decorator';
+import debounce from 'lodash/debounce';
+import rdrApi from '../search-results/dataservice';
+
+
 
 @Component({})
 export default class VsInput extends Vue {
-  term = ""; 
 
-  search() {
+  @Prop()
-    this.$emit("search", this.term);
+  title: string;
+
+  @Prop({ default: 'Search' })
+  placeholder: string;
+
+  display: string = "";
+  value = null;
+  error: string = null;
+  //search: null,
+  results: Array<any> = [];
+  // suggestions: Object = {};
+  //showResults: boolean = false;
+  loading: boolean = false;
+  isAsync: boolean = true;
+  items: Array<any> = [];
+  selectedIndex: number = null;
+  selectedDisplay = null;
+  isFocussed: boolean = false;
+
+  // get results() {
+  //   return this.items;
+  // }
+
+  get showResults(): boolean {
+    return this.results.length > 0;
   }
 
+  get noResults(): boolean {
+    return Array.isArray(this.results) && this.results.length === 0
+  }
+
+  get isLoading(): boolean {
+    return this.loading === true
+  }
+
+  get hasError(): boolean {
+    return this.error !== null
+  }
+
+  get suggestions(): any[] {
+    var suggestion = {
+      titles: [],
+      authors: [],
+      subjects: []
+    };
+
+    for (let key in this.results) {
+      let obj = this.results[key];
+
+      if (obj["title_output"].toLowerCase().indexOf(this.display) !== -1) {
+        var title = obj["title_output"];
+        if (!suggestion["titles"].find(value => value === title)) {
+          suggestion.titles.push(title);
+        }
+      }
+      if (this.find(obj["author"], this.display.toLowerCase()) !== "") {
+        var author = this.find(obj["author"], this.display.toLowerCase());
+        if (!suggestion["authors"].find(value => value === author)) {
+          suggestion.authors.push(author);
+        }
+
+      }
+      if (this.find(obj["subject"], this.display.toLowerCase()) != "") {
+        var subject = this.find(obj["subject"], this.display.toLowerCase());
+        if (!suggestion["subjects"].find(value => value === subject)) {
+          suggestion.subjects.push(subject);
+        }
+      }
+    }
+    var suggestions = Array.prototype.concat(suggestion.titles, suggestion.authors, suggestion.subjects);
+    return suggestions;
+  }
+
+  // @Watch('items')
+  // onItemsChanged(val: Array<any>, oldVal: Array<any>) {
+  //   this.results = val;   
+  //   this.loading = false;
+  // }
+
+  // reset() {
+  //   this.display = "";
+  //   this.items = [];
+  //   this.showResults = false;
+  // }
+  /**
+    * Clear all values, results and errors
+    */
+  clear() {
+    this.display = null;
+    // this.value = null
+    this.results = [];
+    this.error = null;
+    this.$emit('clear');
+  }
+
+  search() {
+    this.$emit("search", this.display);
+  }
+
+  searchChanged() {
+    this.selectedIndex = null
+    // Let's warn the parent that a change was made
+    // this.$emit("input", this.display);
+    if (this.display.length >= 2) {
+      this.loading = true;
+      this.resourceSearch();
+    } else {
+      this.results = [];
+    }
+  }
+
+  resourceSearch = debounce(function () {
+    if (!this.display) {
+      this.results = []
+      return
+    }
+    this.loading = true;
+    // this.setEventListener();
+    this.request();
+  }, 200);
+
+  async request() {
+    try {
+      var res = await rdrApi.searchTerm(this.display);
+      this.error = null
+      this.results = res.response.docs;
+      this.loading = false;
+    } catch (error) {
+      this.error = error.message;
+      this.loading = false;
+    }
+  }
+
+  /**
+ * Register the component as focussed
+ */
+  focus() {
+    this.isFocussed = true
+  }
+  /**
+   * Remove the focussed value
+   */
+  blur() {
+    this.isFocussed = false
+  }
+
+  /**
+ * Is this item selected?
+ * @param {Object}
+ * @return {Boolean}
+ */
+  isSelected(key) {
+    return key === this.selectedIndex
+  }
+
+  onArrowDown(ev) {
+    ev.preventDefault()
+    if (this.selectedIndex === null) {
+      this.selectedIndex = 0;
+      return;
+    }
+    this.selectedIndex = (this.selectedIndex === this.suggestions.length - 1) ? 0 : this.selectedIndex + 1;
+    this.fixScrolling();
+  }
+
+  fixScrolling() {
+    const currentElement = this.$refs.options[this.selectedIndex];
+    currentElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+  }
+
+  onArrowUp(ev) {
+    ev.preventDefault()
+    if (this.selectedIndex === null) {
+      this.selectedIndex = this.suggestions.length - 1;
+      return;
+    }
+    this.selectedIndex = (this.selectedIndex === 0) ? this.suggestions.length - 1 : this.selectedIndex - 1;
+    this.fixScrolling();
+  }
+
+  onEnter() {
+    if (this.selectedIndex === null) {
+      this.$emit('nothingSelected', this.display);
+      return;
+    }
+    this.select(this.suggestions[this.selectedIndex]);
+    this.$emit('enter', this.display);
+  }
+
+  select(obj) {
+    if (!obj) {
+      return
+    }
+    this.value = obj; //(obj["title_output"]) ? obj["title_output"] : obj.id
+    this.display = obj;// this.formatDisplay(obj)
+    this.selectedDisplay = this.display
+    // this.$emit('selected', {
+    //   value: this.value,
+    //   display: this.display,
+    //   selectedObject: obj
+    // })
+    this.$emit('input', this.value);
+    this.$emit("search", this.value);
+    // alert(this.value);
+    this.close();
+  }
+
+  formatDisplay(obj) {
+    if (obj.title_output.toLowerCase().indexOf(this.display) !== -1) {
+      return obj.title_output;
+    } else if (this.find(obj.author, this.display.toLowerCase()) !== "") {
+      var author = this.find(obj.author, this.display.toLowerCase());
+      return author;
+    } else if (this.find(obj.subject, this.display.toLowerCase()) != "") {
+      return this.find(obj.subject, this.display.toLowerCase());
+    } else {
+      return obj.id;
+    }
+
+  }
+
+  find(myarray, searchterm): string {
+    for (var i = 0, len = myarray.length; i < len; i += 1) {
+      if (typeof (myarray[i]) === 'string' && myarray[i].toLowerCase().indexOf(searchterm) !== -1) {
+        // print or whatever
+        return myarray[i];
+      }
+    }
+    return "";
+  }
+
+
+  /**
+    * Close the results list. If nothing was selected clear the search
+    */
+  close() {
+    if (!this.value || !this.selectedDisplay) {
+      this.clear();
+    }
+    if (this.selectedDisplay !== this.display && this.value) {
+      this.display = this.selectedDisplay;
+    }
+    this.results = [];
+    this.error = null;
+    //this.removeEventListener()
+    this.$emit('close');
+  }
+
+
+
+
 }

resources/js/search/text-search/vs-input.vue

@@ -1,13 +1,18 @@
 <template>
   <div class="sidebar-simplesearch">
     <!-- <form method="GET" action="//repository.geologie.ac.at/search" accept-charset="UTF-8"> -->
-    <div>
+     <!-- v-on:keyup.enter="search()" -->
+    <div class="autocomplete__box">
       <input
         class="search-input"     
-        placeholder="Enter your search term..."
         name="q"
         type="text"
-        v-model="term" v-on:keyup.enter="search()"
+        v-model="display"       
+        @input="searchChanged"
+        v-bind:title="title"
+        v-bind:placeholder="placeholder"
+        v-on:keydown.down="onArrowDown" v-on:keydown.up="onArrowUp" v-on:keydown.enter="onEnter"  @keydown.tab="close"
+        v-on:focus="focus"
       />
 
       <!-- <button @click="search()" class="css-1gklxk5 ekqohx90"> -->
@@ -26,6 +31,27 @@
           />
         </svg>
       </button>
+
+      <!-- clearButtonIcon -->
+      <!-- <span v-show="!isLoading" class="autocomplete__icon autocomplete--clear" @click="clear">       
+        <img src="../assets/close.svg">
+      </span> -->
+
+      <ul class="autocomplete-results pure-u-23-24" v-show="showResults">
+        <li class="loading" v-if="isLoading">Loading results...</li>
+
+        <li
+          v-else
+          v-for="(result, key) in suggestions"
+          :key="key"       
+          class="autocomplete-result-item"         
+          :class="{'is-active' : isSelected(key) }"
+            @click.prevent="select(result)"
+            ref="options"
+        >
+          <strong> {{ result }}</strong>
+        </li>
+      </ul>
     </div>
   </div>
 </template>
@@ -45,3 +71,43 @@
 import VsInput from "./vs-input-class";
 export default VsInput;
 </script>
+
+
+<style>
+.sidebar-simplesearch {
+   position: relative;
+  width: 100%;  
+    box-sizing: border-box;
+}
+
+.autocomplete-results {
+  padding: 0;
+  margin: 0;
+  border: 1px solid #eeeeee;
+  list-style-type: none;
+  z-index: 1000;
+  position: absolute;
+  max-height: 200px;
+  overflow-y: auto;
+  background: white;
+  width: 100%;
+  border: 1px solid #ccc;
+  border-top: 0;
+  color: black;
+}
+
+.autocomplete-result-item {
+  list-style: none;
+  text-align: left;
+  padding: 7px 10px;
+  cursor: pointer;
+}
+
+.autocomplete-result-item.is-active {
+  background: rgba(0, 180, 255, 0.15);
+}
+
+.autocomplete-result-item:hover {
+  background: rgba(0, 180, 255, 0.075); 
+}
+</style>