Elasticsearch を使って検索する機能を kintone プラグイン化する https://blog.r3it.com/elasticsearch-on-kintone-6eccb369eb53

Elasticsearch.vue

<template>
  <div>
    <input type="text" autocomplete="off" v-model="userinput">
    <ul>
      <li v-for="item in items">
        {{ item.dispText }}
      </li>
    </ul>
  </div>
</template>

<script>
import elasticsearch from "elasticsearch";

const client = new elasticsearch.Client({
  host: [
    {
      host: "127.0.0.1",
      protocol: "http",
      port: 9200
    }
  ]
});

export default {
  name: "Elasticsearch",
  props: ["index"],
  data() {
    return { 
      userinput: "",
      items: []
    };
  },
  watch: {
    userinput: function(val, oldVal) {
      client.search({
        index: this.index,
        body: {
          "query": {
            "prefix": {
              "郵便番号": {
                "value": val
              }
            }
          }
        }
      }).then(body => {
        this.items = [];
        const hits = body.hits.hits;
        hits.forEach(hit => {
          const source = hit._source;
          const dispText = `${source["郵便番号"]} ${source["都道府県名"]} ${source["市区町村名"]} ${source["町域名"]}`;
          this.items.push({ dispText: dispText });
        });
      }, error => {
        console.trace(error.message);
      });
    }
  }
}
</script>