vue 实时查询

先来看一下搜索效果

节流函数

首先，我们来理解一下：节流函数首先是节流，就是节约流量、内存的损耗，旨在提升性能，在高频率频发的事件中才会用到，比如：onresize，onmousemove，onscroll，oninput等事件中会用到节流函数；

 

实时查询功能原理分析

所谓模糊查询就是不需要用户完整的输入或者说全部输入信息即可提供查询服务，也就是用户可以在边输入的同时边看到提示的信息（其实是查询出来匹配到的信息），百度的搜索功能就是很好的模糊查询的例子；其实模糊查询的原理就是给输入框绑定oninput事件监听用户输入情况，然后每次用户只要在输入框中输入了信息就触发事件进行查询然后实时展示；原理很简单，但是实现起来会有一些问题，我们可以想想，每输入一个字符都会触发事件，那如果我们需要输入很长的信息呢，那查询是不是就得触发多次？ajax连续多次触发，再加上如果我们的方法体中有操作DOM元素的方法，那么必然会给我们的浏览器进入假死甚至崩溃状态；那么我们有没有办法来解决此类问题呢？答案是：有的；（不了解模糊查询功能的同学可以出门右转去百度首页试一下搜索，给你5分钟，我等你回来）

 

html视图层代码

<div>　　　　　　　　
    <div style="margin-top: 15px;">
      <!--    输入框，绑定输入框的值是变量input_value的值,然后对输入框做了事件绑定keyup，在用户输入的时候会触发-->
      <el-input placeholder="请输入关键字" v-model="input_value" class="input-with-select" @keyup.native="throttle" ref="input">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>

    <ul v-show="state">
      <li v-for="(item,index) in list" :key="index" @click="handleInputClick(item)">
        <span>{{item.title}}</span>
      </li>
    </ul>
    <div v-show="IsResultDisplayed" style="position:absolute;top: 70px">
      <span>结果：</span>
      <span>{{ result }}</span>
    </div>
  </div>

View Code