百度搜索下拉列表

最新推荐文章于 2025-06-20 09:25:38 发布

小山博客

最新推荐文章于 2025-06-20 09:25:38 发布

阅读量515

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/seamode/article/details/88038087

本文介绍使用Vue.js和百度API实现搜索联想建议功能的方法，包括实时监听输入框变化、发送HTTP请求获取联想建议列表，并用键盘上下键进行选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <script type="text/javascript" src="js/vue1.0.js" ></script>
       <script type="text/javascript" src="js/vue-resource.v0.7.0.js" ></script>
       <link rel="stylesheet" href="css/bootstrap.css" />
       <title></title>
       <style>
           .gray{
               background: gray;
           }
       </style>
       <script>
           window.onload=function(){
               new Vue({
                   el:'#box',
                   data:{
                       myData:[],
                       t1:'',
                       now:-1
                   },
                   methods:{
                       get:function(ev){
                           if(ev.keyCode==38||ev.keyCode==40)//下和上阻止触发
                           return;
                           if(ev.keyCode==13)
                           {
                               window.open('https://www.baidu.com/s?wd='+this.t1);
                               this.t1='';
                           }
                           this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                               wd:this.t1//获取当前输入框数据
                           },{
                               jsonp:'cb'
                           }).then(function(res){
                               this.myData=res.data.s;
                           },function(res){

                           });
                       },
//向下按键

                   changeDown:function(){
                           this.now++;
                           if(this.now==this.myData.length)this.now=-1;
                           this.t1=this.myData[this.now];
                       },

//向上按键
                       changeUp:function(){
                           this.now--;
                           if(this.now==-2)this.now=this.myData.length-1;
                           this.t1=this.myData[this.now];
                       }
                   }
               });
           };

       </script>
   </head>
   <body>
       <div id="box" style="margin:30px auto;width: 500px;" >
           <input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()"
               @keydown.up.prevent="changeUp()">
           <ul>
               <li v-for="value in myData" :class="{gray:$index==now}">{{value}}</li>
           </ul>
           <p v-show="myData.length==0">很抱歉,暂时没有数据</p>
       </div>
   </body>
</html>