vue仿百度联想

最新推荐文章于 2020-06-18 21:59:14 发布

啥时候能干全栈

最新推荐文章于 2020-06-18 21:59:14 发布

阅读量522

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_42177478/article/details/105190325

版权

vue 专栏收录该内容

27 篇文章 6 订阅

订阅专栏

功能：输入关键字弹出联想。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="./idex.css">
    <script src = "./jquery.js"></script>
  <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <div class="logo">
            <img src="https://www.baidu.com/img/bd_logo1.png?where=super" title="点击一下了解更多">
        </div>
        <div class="search-box">
            <span class="search-area">
                    <input type="text"
                      maxlength="100"
                      v-model = "inputVal"
                      @focus = "() => inputFpcus = true"
                      @blur = "() => inputFpcus = false"
                    >

                <span class="icon icon-paizhao"></span>
            </span>
            <span class="search-btn">百度一下</span>
            
        </div>
        <ul class="search-list"
            v-show = "inputFpcus && searchResList.length"    
        >
            <li
              v-for = "res in searchResList"
              :key = "res"
            >
           {{ res }}
        </ul>
        </div>
    </div>
    

    <script>
        const vm = new Vue({
            el:'#app',

            data:{
                inputFpcus:false,
                inputVal :'',
                searchResList:[]

            },
            methods:{
                searchRes(res){
                    this.searchResList = res.s;
                }
            },
            watch:{
                inputVal(){
                    $.ajax({
                        dataType:'jsonP',
                        url:' https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
                        data:{
                            wd:this.inputVal,
                            cb:'vm.searchRes',
                        }
                    })

                }
            }

        })
    </script>
</body>
</html>

* {
    padding: 0;
    margin: 0;
  }
  
  li {
    list-style: none;
  }
  
  @font-face {
    font-family: 'iconfont';  /* project id 1511900 */
    src: url('./font/iconfont.eot');
    src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'),
    url('./font/iconfont.woff2') format('woff2'),
    url('./font/iconfont.woff') format('woff'),
    url('./font/iconfont') format('truetype'),
    url('./font/iconfont.svg#iconfont') format('svg');
  }
  
  .icon {
    font-family: 'iconfont' !important;
  }
  
  .icon-paizhao:before {
    content: "\e66f";
  }
  
  #app {
    width: 638px;
    margin: 100px auto;
  }
  
  .logo {
    width: 270px;
    height: 129px;
    margin: 0 auto;
  }
  
  .logo img{
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  
  .search-box {
    display: flex;
    margin-top: 40px;
  }
  
  .search-area {
    position: relative;
    display: inline-block;
    width: 536px;
    height: 40px;
    line-height: 40px;
  }
  
  .search-area  input {
    width: 480px;
    height: 20px;
    padding: 9px 48px 9px 7px;
    font-size: 16px;
    border: 1px solid #b8b8b8;
    border-bottom: 1px solid #ccc;
    vertical-align: top;
    border-right: none;
    outline: none;
  }
  
  .search-area  input:focus {
    border-color: #38f;
    /* border-bottom-color: transparent; */
  }
  
  .search-area .icon-paizhao {
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: 11px;
    font-size: 22px;
    line-height: 16px;
    cursor: pointer;
  }
  
  .search-btn {
    width: 102px;
    height: 40px;
    line-height: 40px;
    background-color: #38f;
    color: #fff;
    font-size: 16px;
    text-align: center;
  }
  
  .search-btn:hover {
    height: 39px;
    background-color: #317ef3;
    border-bottom: 1px solid #2868c8;
    box-shadow: 1px 1px 1px #ccc;
  }
  
  .search-list {
    position: relative;
    top: -1px;
    width: 535px;
    border: 1px solid #ccc;
    padding-top: 1px;
    box-shadow: 1px 1px 3px #ededed;
    z-index: 1;
  }
  
  .search-list li {
    width: 519px;
    height: 22px;
    line-height: 22px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 14px;
    cursor: default;
  }
  
  .search-list li:hover {
    background-color: #f0f0f0;
  
  }

啥时候能干全栈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue仿百度联想

功能：输入关键字弹出联想。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...
复制链接

扫一扫