前言
这个功能在网站中也很常见,下拉选择带搜索,基于之前的typeahead
组件的基础上完善
效果图
实现逻辑
- 和
typeahead
的实现大同小异,就是选择和传递数据的细节有所改善和重置默认值的思路有所变动 indexOf
的比对稍微加强了,字母默认全部小写,还有输入的值去除空格
整体来说比typeahead
组件更好理解和阅读
你能学到什么?
- css样式
- 组件临时增加的状态的处理
- 数据过滤
- 一些常用按键的监听实现(
ESC
,up
,down
,Enter
),失焦等… - 过滤数据的默认选中
代码
selectSearch.vue
<template>
<div class="select-search">
<div class="select-header" @click="isExpand=!isExpand">
<input type="text" autocomplete="off" readonly :placeholder="placeholder" :value="placeholderValue" @keydown.down.prevent="selectChildWidthArrowDown" @keydown.up.prevent="selectChildWidthArrowUp" @keydown.enter="selectChildWidthEnter">
<i class="fzicon " :class="isExpand?'fz-ad-jiantou1':'fz-ad-jiantou'"></i>
</div>
<div class="select-body" v-if="isExpand">
<input type="text" placeholder="关键字" v-model="searchVal" autocomplete="off" @blur="resetDefaultStatus" @keydown.esc="resetDefaultStatus" @keydown.down.prevent="selectChildWidthArrowDown" @keydown.up.prevent="selectChildWidthArrowUp" @keydown.enter="selectChildWidthEnter">
<transition name="el-fade-in-linear" mode="out-in">
<div class="typeahead-filter" v-show="typeaheadData">
<transition-group tag="ul" name="el-fade-in-linear">
<li v-for="(item,index) in typeaheadData " :key="index" :class="item.active ? 'active':''" @mouseenter="setActiveClass(index)" @mouseleave="setActiveClass(index)" @click=