Vue.JS AJAX Autocomplete

index.html

<div id="app">
  <form>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Buchtitel" aria-label="Buchtitel suchen" v-model="query" @keyup="search">
      <div class="input-group-append"><button class="btn btn-outline-primary" id="button">Suchen</button></div>
    </div>
    <div class="p-5 d-flex justify-content-center" v-if="!docs.length && query.length"><div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div></div>
    <div class="list-group" v-if="docs.length">
      <button v-for="doc in docs" type="button" class="list-group-item list-group-item-action">{{ doc.title }}</button>
    </div>
  </form>
</div>

script.js

const app = new Vue({
  el: '#app',
  data: {
    query: "",
    docs: [],
    controller: null,
  },
  methods: {
    search() {
      if(controller) {
        controller.abort();
      }
      this.controller = new AbortController();
      
      if(this.query.length > 5) {
        fetch(`https:/openlibrary.org.search.json?title=${this.query.replace(/\s/, '+')}`)
        .then(res => res.json())
        .then(
          this.docs = res.docs;
          this.controller = null;
        )
      }
    }
  },
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

style.css

#app {
  padding: 1em;
}

.list-group {
    max-height: 15.375rem;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

.d-flex[hidden] {
  display: none !important;
}

styles

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

vue-js-ajax-autocomplete.markdown

Vue.JS AJAX Autocomplete

A Pen by Jens Grochtdreis on CodePen.

License.