搜索框功能(ajax）(重要)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>模仿百度搜索框</title>
</head>
<style>
  ul{
    list-style: none;
    background: #fff;
    color:pink;
  }
</style>
<body>
 <div id="s_fm" class="s_form"> 
    <div class="s_form_wrapper soutu-env-nomac soutu-env-newindex" id="s_form_wrapper">
      <div id="lg" class="s-p-top">
        <img id="s_lg_img" src="img/bsp.jpg" width="270" height="129">  
      </div>
      <div id="input">
        <form id="form" class="fm" >
          <span id="s_kw_wrap" class="fn-left bg s_ipt_wr quickdelete-wrap">
            <input type="text" class="s_ipt" id="kw" maxlength="100" autocomplete="off">
          </span>
          <span class="fn-leftbtn_wr s_btn_wr bg" id="s_btn_wr">
            <input type="button" value="百度一下" id="su" class="btn self-btn bg s_btn">
          </span>
        </form>
        <ul id="inputList" style="display:none"></ul>
      </div>
    </div> 
  </div>
</body>
<script src = "js/jquery-1.4.2.min.js"></script>
<script>
    $(function(){
    $("#kw").bind("keyup click",function(){
      var t=$(this),_html="";
      window.baidu= {};
      window.baidu.sug = function(data){
        var x = JSON.stringify(data);
        var x=eval ("(" + x + ")");
        var abc = x.s;
        for(var i=0; i<abc.length; i++){
          _html+="<li>"+abc[i]+"</li>";
        }
        $("#inputList").html(_html);
        if(t.val() == ""){
          $("#inputList").hide();
        }else{
          $("#inputList").show().css({
            left:$("#kw").offset().left,
            top:$("#kw").offset().top+40
          })
        }
        if($("#inputList").html() == ""){
          $("#inputList").hide();
        }
      };
      $.ajax({
        async:false,
        url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+t.val(),
        dataType:'jsonp',
        jsonp:"mycallback",
        jsonpCallback:"window.baidu.sug"
      });
    })

    $(document).delegate("#inputList li","click",function(){
      var key = $(this).text();
      location.href = "https://www.baidu.com/s?wd="+key;
    })

    $(document).delegate("#su","click",function(){
      var key = $("#kw").val();
      location.href = "https://www.baidu.com/s?wd="+key;
    })

    $(document).click(function(){
      $("#inputList").hide();
    })
  });
</script>
</html>
posted @ 2017-01-19 15:22 TTTK 阅读(442) 评论(0) 收藏举报
TTTK

搜索框功能(ajax）(重要)

公告
