Explication détaillée de l'exemple de recherche à distance d'entrée vue Element-ui

Cet article est divisé en codes html, js et css pour vous donner une introduction détaillée aux fonctions de recherche à distance d'entrée et de suggestion de modification de vue Element-ui. Les amis intéressés devraient y jeter un œil. aider tout le monde.

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('p', { 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.toLowerCase()) === 0);
   };
  },
  loadAll(data) {
   let serier = [];
   if (data) {
    for (let i = 0, l = data.length; i < l; i++) {
     let a = data[i];
     let b = &#39;&#39;;
     if (typeof a === "object") {
      b = a[1];
      a = a[0];
     }
     serier.push({ "value": a, "address": b })
    }
   } else { // 如果没有请求到数据，则显示暂无数据！
    serier.push({ "str": &#39;暂无数据&#39; })
   }
   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>　

Recommandations associées:

Méthode de remplacement de JavaScript pour implémenter la mise en évidence des mots clés de recherche

Méthode de recherche asynchrone en temps réel du plug-in jquery select

Bootrap et Vue pour imiter Baidu Exemple de fonction de recherche

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!