Vue 手写组件之实现一个可显示图片的自定义远程搜索框

在实际的vue项目开发中，一般与element-ui搭配使用的比较多。

如下图，这个是element-ui官网为我们提供的远程搜索组件，它能够在我们输入时，根据输入内容实时从远程服务器获取内容并显示在下拉框中。

现在问题来了，我们有这样一个需求：下拉列表中不仅仅能展示文字内容，也要显示相应的文字说明图片

Element-ui列表中对应的内容显然 是搜索到的内容的value字段，是一个字符串，是无法满足我们放入图片的需求的。

这时就需要我们自己去封装一个自定义的能显示图片的远程搜索框了。

原理其实很简单：

1. 监听文本框的输入事件，并且为其添加防抖（性能上的优化，使得停止输入一段时间后再去调用搜索函数）
2. 将搜索到的内容放入一个无序列表中，在输入框下方显示
3. 为列表设置最大高度(否则将根据搜索到的内容个数无限向下延长)，超过这个高度则加滚动条
4. 点击其他区域或者选中某一项时列表框隐藏
5. 样式，每项加边框，下面加阴影，每项鼠标移动进入时颜色置灰，移除时恢复

最终实现效果如图：

代码如下：

// 封了一个从服务器远程获取搜索内容的输入框，比autocompleteuole多了在列表中显示图片的功能

直接在需要的页面引入并使用：

// item: { word: '' }
// 假如你要将input框与item的word属性绑定，则