vue Element-ui 입력 원격 검색 예시에 대한 자세한 설명

이 글은 vue Element-ui 입력 원격 검색 및 수정 제안 표시 템플릿 기능에 대해 자세히 설명하기 위해 html, js, css 코드로 나누어서 살펴보시기 바랍니다. 모든 사람.

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>　

관련 권장 사항:

JavaScript의 검색 키워드 강조 방법 대체 구현

jquery 선택 플러그인 비동기 실시간 검색 구현 방법

Bootrap 및 Vue

를 사용하여 Baidu 검색 기능을 구현한 예

위 내용은 vue Element-ui 입력 원격 검색 예시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!