【vue】模糊匹配input内容，用vue实现输入建议框（不借助element-ui），解决基本交互问题

bjl1758

已于 2022-01-29 17:36:49 修改

阅读量2k

点赞数 1

分类专栏： vue 文章标签： vue elementui 前端

于 2022-01-20 18:58:28 首次发布

本文链接：https://blog.csdn.net/weixin_44694806/article/details/122565700

版权

内容：

模糊匹配input内容，用vue实现输入建议框，完善基本交互问题。

效果如下：

在这里插入图片描述

具体分析：

将input的关键词进行模糊匹配，当input对焦 focus且匹配个数不为0的情况下，制作该输入建议框，并浮动在最顶层。
该列表<ol>的每一选项<li>都绑定点击事件click，选中后填充相关信息
点击其他空白处，即input框失焦blur时，该输入建议框应隐藏不予显示。但点击输入建议框时，input虽然失焦，但应显示该浮动窗口。

步骤和注意事项：

现在我们来看看如何实现这个单元格呢，首先在标签<td>中添加<input>框和一个<div>盒子，上下对齐，该盒子内部再添加列表<ol>。这里的盒子意义在于，为了让该建议框浮动在最顶层，需要套一个父组件<div>，设置#floatOl_fa的样式，再结合子组件<ol>，设置#floatOl样式，来达到浮动效果。

样式：

<style>
    /* 父组件floatOl_fa 保证浮动在顶层 */
    #floatOl_fa {
   
        position: absolute;
        color: rgba(255, 255, 255, 0);
    }

    #floatOl {
   
        width: auto;
        max-height: 200px;
        min-width: 120px;
        overflow-y: auto;
        /* overflow-x: hidden; */
        border: 1px solid rgb(24, 134, 224);
        border-radius: 4px;
        background-color: white;
        color: black;
        display: inline-block;
        list-style-type: none;
        padding: 8px 5px 8px 10px;
        margin: 0;

    }

    /* 浮动列表样式 */
    ol li:hover {