vue实现搜索功能

vue实现搜索功能案例

模板代码

解析：

1.keyup：键盘松开时候获取input框的值，调用接口获取数据，把数据展示在li里

2.blur：当input框失去焦点时，收起searchli面板

3.click：li里的数据点击后把值给input框

注意：自身封装的input标签后会隐藏默认事件，需要在事件后加上.native

.native - 监听组件根元素的原生事件。作用：主要是给自定义的组件添加原生事件。

.capture-添加事件侦听器时使用事件捕获模式，即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。

<div class="search">
    <input type="text" @keyup.native="showsearch()" v-model="inputsearch" @blur.native.capture="blurfn"/>
    <div class="searchli" v-if="showli">
        <ul>
            <li v-for="(item,index) in searcharr" :key="index" @click="selectitem(item.ruleNameText)">{{item.ruleNameText}}</li>
        </ul>
    </div>
</div>

data数据

showli:false,
inputsearch:'',
searcharr:[],

methods方法

解析：

1.keyup事件中当input值为空则收起showli面板

2.blur事件中bug，如果失去焦点直接收起showli面板，点击li列表时无法监听，解决方法设置定时器，当失去焦点后延迟一会才收起showli面板

3.li列表点击，把值给input，并收起showli面板

showsearch(){
    if(this.inputsearch){
      const params = {
        inputsearch:this.inputsearch
      }
      data.showlist({params:params}).then(res=>{
        const data=res.data;
        this.searcharr=data;
        this.showli=true;
      })
    }else{
      this.showli=false;
    }
  },
  blurfn(){
    setTimeout(() => {
      this.showli=false;
    },
    200)
  },
  selectitem(val){
    this.inputsearch=val;
    this.showli=false;
  }
}