基于Vue el-autocomplete 实现类似百度搜索框功能

效果图如下所示：

首先上代码

  .assets-search {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #6ba9ec;
    .search-layout{
      text-align: center;
      .search-title{
 font-size: 50px;
 color: white;
 font-weight: bold;
 padding-bottom: 40px;
      }
      .search-input-layout{
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 .search-input{
   width: 50%;
 }
 .search-word-layout{
   text-align: left;
   width: 50%;
   padding: 15px;
   display: flex;
   flex-direction: row;
   align-items: center;
   .search-word-title{
     font-size: 15px;
     color: white;
   }
   .search-word-list{
     span:hover{
color: #666666;
     }
   }
   .search-word{
     font-size: 15px;
     color: white;
     padding-right: 10px;
     cursor: pointer;
   }
 }
      }
      .db-number-layout{
 margin-top: 80px;
      }
    }
    .el-input-group--append .el-input__inner {
      border-radius: 0;
      height: 48px;
      line-height: 48px;
    }
    .el-input-group__append {
      background: $color-assist;
      border-color: $color-assist;
      border-radius: 0;
      color: white;
    }
  }

注意的细节

基础使用

fetch-suggestions 这个方法是去请求包含关键字的搜索功能，这里注意返回结果里面的列表对象属性里面要有一个value的属性，这个才能显示，联想输入内容。

select 方法是选择了一个联想输入的具体数据的点击事件

注意事项

按enter键进行搜索功能@keyup.enter.native="searchAssets(event)"，有些人会好奇，这个 event)"，有些人会好奇，这个event)"，有些人会好奇，这个event是一个什么东西，其实就是一个事件，代码

if (event) {
   event.target.blur();
   this.$refs.autocomplete.close();
}

这个是为了处理点击enter使input输入框失去焦点，还有一个作用就是，让el-autocomplete 的联想输入框关闭。这个达到和百度搜索类似的效果。

总结

以上所述是小编给大家介绍的基于Vue el-autocomplete 实现类似百度搜索框功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！