php和ajax實現仿百度查詢下拉內容的執行個體詳解

來源:互聯網
上載者:User
php和ajax實現仿百度查詢下拉內容的執行個體詳解

運行效果如下:

html代碼:


<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>  <style type="text/css">    body{      margin:0;      padding: 0;    }    form{      width: 500px;      margin:40px auto;    }    .search-wrap{      position: relative;    }    li{      padding: 0;      padding-left: 10px;      list-style: none;    }    li:hover{      background-color: #ccc;      color: #fff;      cursor: pointer;    }    #xiala{      position: absolute;      top: 40px;      left: 0;      background-color: #c2c2c2;      width: 200px;      margin:0;      padding: 0 ;      display: none;    }  </style></head><body>  <form action="">    <p class="search-wrap">      <input type="text" id="search">      <ul id="xiala">      </ul>      <input type="button" value="go" id="sousuo">      <p id="searVal" style="display:inline-block;border:1px solid #ccc"></p>    </p>  </form></body><script type="text/javascript">  var search=$("#search");  search.on("input",function(){  //輸入框內容改變發請求    $.ajax({      url:'a.txt',      type:'GET',      async:true,      data:{value:$("#search").val()},      success:function(data){        var arr=data.split(',');        console.log(arr);        $("#xiala").html("");        $.each(arr,function(i,n){          var oLi=$("<li>"+arr[i]+"</li>");          $("#xiala").append(oLi);          $("#xiala").css("display","block");        })      }    });    $("#xiala").css("display","block");       //內容改變下拉框顯示    $("#searVal").html(search.val())  })  function stopPropagation(e) {    if (e.stopPropagation){       e.stopPropagation();    }else{     e.cancelBubble = true;    }  }  $(document).on('click',function(){     //點擊頁面的時候下拉框隱藏    $("#xiala").css("display","none");  });  $(document).on("click","#xiala li",function(){ //點擊下拉框選項的時候改變輸入框的值    search.val($(this).text());    $("#searVal").html($(this).text());    $("#xiala").css("display","none");  })</script></html>

a.txt內容:


a,b,c,d,e,f,g
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.