php+ajax實現仿百度查詢下拉內容功能示例

更新:2017-10-27    編輯:白凝    來源:本站整理    人氣:加載中...    字號:|

標簽:實現  功能  示例  查詢  百度  內容  百度搜索

本文實例講述了php+ajax實現仿百度查詢下拉內容功能。分享給大家供大家參考,具體如下:

運行效果如下:

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=""> <div> <input type="text"> <ul> </ul> <input type="button" value="go"> <div></div> </div> </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


,
評論列表(網友評論僅供網友表達個人看法,并不表明本站同意其觀點或證實其描述)

站點導航

您可能在找這些
四川快乐12电视软件 股票是怎么玩的 宜昌麻将血流换三张下载 香港开奖结果开奖直播 黑龙江省11选5开奖助手 网上的棋牌是什么套路 理想股票论坛 广西悠玩棋牌客服电话 英超赛程直播 陕西麻将下载安装 手机最快现场开奖直播