VUE模仿百度搜索框，按上下方向键及回车键实现搜索选中效果

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

逻辑介绍：
　　1、表单获取焦点时，显示搜索建议框
　　2、输入内容时，请求后台接口，并将返回的数据展示在搜索建议框内
　　3、表单获取焦点情况下，按键盘上下箭头可实现搜索列表项的切换，按回车可以选择当前激活的选项并获取当前选项的数据，然后你可以用数据做其他事了

  .container {
    width: 100%;
    .d-searchBox {
      margin-left: 300px;
      margin-top: 20px;
      display: inline-block;
      position: relative;
      input {
        height: 26px;
        border-radius: 4px;
        font-size: 14px;
      }
      .searchResult {
        position: absolute;
        top: 36px;
        left: 0;
background-color: #fff;
        box-shadow: 0 0 6px 0 $themecolor;
        width: 100%;
        li {
          border-bottom: 1px solid #ddd;
          padding: 4px 10px;
          font-size: 14px;
          color: $themecolor;
          &.active {
            background-color: rgba($themecolor, 0.1);
          }
        }
      }
    }
  }
</style>
效果图如下：

以上是 VUE模仿百度搜索框，按上下方向键及回车键实现搜索选中效果 的全部内容，
                        来源链接：
                            utcz.com/z/376819.html
回到顶部