为了账号安全,请及时绑定邮箱和手机立即绑定

关于按钮提交跳转不了问题

视频只教了提示框点击提交,按钮提交跳转不了是出了什么问题

<div class="bg-div">  

 <div class="search_box">

 <form action="" method="get" id="search_form">    

<input type="text" class="search_text" name="q" id="search_input" autocomplete="off"  value="" />

<input type="submit" class="search_button" id="searchButton" value="" />

</form> 

</div>

</div>


<!-- 提示 -->

<div class="suggest" id="search_suggest" style="display:none;">

   <ul id="search_result">

      <li>搜索结果1</li>

      <li>搜索结果2</li> 

   </ul> 

</div>

<script>

 $(function(){

     $('#search_input').on('keyup',function(){

      var searchText = $('#search_input').val();

      $.ajax({

        url: 'http://api.bing.com/qsonhs.aspx?type=cb&q='+searchText, //当前页地址。发送请求的地址。

        type: 'get',

        async:true, //默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。

        dataType: 'jsonp',//预期服务器返回的数据类型

        jsonp:'cb',//在一个 jsonp 请求中重写回调函数的名字

        jsonpCallBack:'callback',        

        success:function(d){ //当请求之后调用

          var d = d.AS.Results[0].Suggests;

          var html = '';

          for(var i=0; i<d.length; i++){

            html+='<li>'+d[i].Txt+'</li>';

          }

          $('#search_result').html(html);

            $("#search_suggest").show().css({

                top:$("#search_form").offset().top+$("#search_form").height()+10,

                left:$("#search_form").offset().left,

                position:"absolute"

            });

         },

         error:function (){ //在请求出错时调用

            console.log("失败");

        }

      })

   }); 

  $(document).bind('click',function(){

       $("#search_suggest").hide();

  });

//提示框点击提交  

$('#search_result').on('click','li',function(){

     var keyword = $(this).text();

     location.href = 'http://cn.bing.com/search?q='+keyword;

  })

//按钮提交  

$('#searchButton').on('click',function(){

     var keytext = $('#search_input').val();

     location.href = 'http://cn.bing.com/search?q='+keytext;

  })


})      

</script>



正在回答

2 回答

举报

0/150
提交
取消
搜索框制作
  • 参与学习       66064    人
  • 解答问题       431    个

本课程从简入深讲解搜索框的制作,学习JQ与JS实现Ajax技术的不同点

进入课程

关于按钮提交跳转不了问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信