vue Element-ui input 遠程搜索 與 修改建議顯示模版

本文僅供參考，提供思路！

html:

<template>
  <el-autocomplete popper-class="my-autocomplete" custom-item="my-remote" v-model="state" :fetch-suggestions="querySearch" placeholder="默認空" icon="close" :on-icon-click="handleIconClick">
  </el-autocomplete>
</template>

js:

<script>
import Vue from 'vue'
Vue.component('my-remote', {
  functional: true,
  render: function(h, ctx) {
    var item = ctx.props.item;
    let str = h('li', ctx.data, [
      h('div', { attrs: { class: 'name' } }, [item.value]),
      h('span', { attrs: { class: 'addr' } }, [item.address])
    ]);
    if (item.str) { // 根據參數不一樣 修改原模版結構
      str = h('center', { attrs: { class: 'ems' } }, [item.str])
    }
    return str
  },
  props: {
    item: { type: Object, required: true }
  }
});

export default {
  data() {
    return {
      restaurants: [],
      state: '',
      timeout: null,
      _that: {} // 記錄this，用來發起http請求
    };
  },
  methods: {
    querySearch(queryString, cb) {
      let restaurants = this.restaurants;
      if (restaurants.length > 0) { // 若是參數都沒變化，則使用緩存數據，避免請求沉積
        let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        cb(results);
      } else {
        const qtype = ‘參數’;
        this._that.$http('/inner', { qtype: qtype }) 
          .then((res) => {
              restaurants = this.loadAll(res);
              this.restaurants = restaurants;
              let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
              cb(results);
          })
          .catch((err) => {
            restaurants = this.loadAll();
            let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            cb(results);
          });
      }
    },
    createFilter(queryString) {
      return (restaurant) => {
        if (restaurant.str) return false;
        return (restaurant.value.indexOf(queryString) >= 0);
      };
    },
    loadAll(data) {
      let serier = [];
      if (data) {
        for (let i = 0, l = data.length; i < l; i++) {
          let a = data[i];
          let b = '';
          if (typeof a === "object") {
            b = a[1];
            a = a[0];
          }
          serier.push({ "value": a, "address": b })
        }
      } else { // 若是沒有請求到數據，則顯示暫無數據！
        serier.push({ "str": '暫無數據' })
      }
      return serier;
    },
    handleIconClick(ev) {
      this.state = "";
    }
  },
  mounted() {
    this._that = this;
  }
}
</script>　

css:

<style lang="scss">
.my-autocomplete {
  li {
    line-height: normal !important;
    padding: 7px !important;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
  .ems {
    font-size: 12px;
    color: #b4b4b4;
  }
}
</style>　

大體方法就是這樣，能夠根據本身須要再改動！