百度搜索下拉列表

关注

原创最新推荐文章于 2025-11-19 09:45:00 发布 781 阅读 AI 写同款· GEO 优化 ›

仿制百度下拉列表搜索框的jQuery实现方法本文还有配套的精品资源，点击获取简介：利用jQuery的强大功能，本项目旨在模拟百度搜索引擎的下拉列表搜索功能，提升用户搜索体验。项目将介绍如何通过jQuery的DOM操作、事件处理及Ajax交互实现智能模糊查询。从HTML结构构建、CSS样式美化、jQuery事件监听、动态内容更新到动画效果实现，每一个环节都被详细规划，以提供一个用户友好且响应迅速的搜索框。本项目还将探... 阅读详情

<!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>