vue 模糊搜索

类似于elementUI 的 el-autocomplete远程搜索

参考：https://github.com/Daotin/fe-notes/issues/170

<template>
  <div id="app">
    <!-- <input type="text" :value="filterText" @input="onInput" /> -->
    <input type="text" v-model="filterText" @input="onInput" @focus="focus()"  />
    <ul v-show="showList">
      <li v-for="item in filteredList" :key="item" @click="getText($event)">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      filterText: "",
      list: [
        "爱与希望",
        "花海",
        "Mojito",
        "最长的电影",
        "爷爷泡的茶"
      ],
      showList:false
    };
  },
  computed: {
    filteredList() {
      if (!this.filterText) {
        return this.list;
      }
      return this.list.filter(item => item.indexOf(this.filterText) > -1);
    },
    
  },
  methods: {
    onInput(e) {
      // console.log(e)
      this.filterText = e.target.value;
    },
    focus(){
      this.showList=true
    },
    // blur(){
    //   this.showList=false
    // },
    getText(event){
      console.log(event.target.innerText)
      this.filterText = event.target.innerText
      // window.body.click()
    }
  }
};
</script>

 另外考虑性能问题，可食用防抖和节流函数优化。

参考：https://www.jb51.net/article/185347.htm

/**
 * 函数防抖
 */
export function debounce(fn, delay) {
 // 记录上一次的延时器
 var timer = null;
 var delay = delay || 200;
 return function() {
  var args = arguments;
  var that = this;
  // 清除上一次延时器
  clearTimeout(timer)
  timer = setTimeout(function() {
    fn.apply(that,args)
  }, delay);
 }
}

 也可以使用第三方js库 fuse.js

参考：https://www.jianshu.com/p/44e8edb4c404