本功能第一次遇到是在百度2017年暑期实习生招聘时遇到的，当时的要求是：实现一个类似百度搜索时，输入给出候选词的功能。这个很容易，一般配合ul li 实现，但是有些特殊场景我当时并没有考虑到，如：
由于候选词都是模糊查询的，故当用户输入为空时，这时候模糊查询返回的结果可能并非为null，此时仍会显示候选词输入结果。即：无论何时，该下拉菜单都会显示。
这与自定义下拉菜单的实现类似，在大多数功能中，这种实现都ok，可以控制用户选择完之后，收缩下拉菜单（候选词），但是当用户在输入过程中，突然不想输入，而想看第一条数据时（大多数靠前的数据都会被遮挡），这时你会发现该菜单无法收缩。
这里常见的做法是：
在该html中设置一层mask，而将下拉菜单及相关的操作层置顶，只要检测到鼠标的操作在mask上，而不是下拉菜单层时，判定用户想关闭下拉菜单，此时再隐藏mask和下拉菜单。
故，以下部分给出vuejs中的实现代码：
<div class="navbar"> <span>标签</span> <div class="mask" @click="dropUp" v-if="candicateArr.length>0"></div> <div class="search-bar"> <Input class="category" v-model="formItem.category" name="category" placeholder="请输入类别..." @keyup.enter="onEnter" @input="onInput" ></Input> <ul> <li v-for="word in candicateArr" @click="chooseTag(word)">{{word.tagName}}</li> </ul> </div> </div> .mask{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .navbar .search-bar{ padding-left: 45px; margin-top: -40px; width: 100%; position: absolute; z-index: 1; } methods:{ dropUp(event){ if(event.target.className=='mask'){ this.candicateArr = []; } } }