移動端輸入框輸入完內容後點擊軟鍵盤上的搜尋按鈕進行搜尋
阿新 • • 發佈:2018-12-27
<div class="search_header"> <div><i class="iconfont icon-mulu"></i></div> <div class="search_input"> <i class="iconfont icon-search1"></i> <form action="#"> <input class="search_content" style="border: none" type="search" placeholder="請輸入關鍵字"> </form> </div> </div>
body { background-color: #f3f3f3; } .search_header { display: flex; padding: 5px 10px; background-color: #960001; align-items: center; } .icon-mulu { color: white; font-size: 20px; margin-right: 8px; } .icon-search1 { color: #dcdcdd; display: block; margin-top: 4px; line-height: 1.1; font-size: 25px; } .search_input { background-color: white; display: flex; align-items: center; flex: 1; padding-left: 5px; border-radius: 2px; margin-right: 5px; }
// 搜尋 繫結確認按鈕 $("form").on("submit",function (e) { //這是寫死的不用改 直接在下面調AJAX就行 var keyword = $(".search_content").val(); //輸入的內容 $.Ajax({ url:baseUrl + "AmoySource/client/topic/search", is_login:true, data:{ keyword:keyword }, success:function (res) { alert(JSON.stringify(res)) if (res.code == 1){ var Post = "Post"; var tem_Post = template(Post,res.result); $(".msgg").html(tem_Post); var width = window.screen.width; var width_one = (width - 20) * 0.6; var width_two = (width - 30) * 0.4; //兩張照片的寬 var width_three = (width-40)/3;//三張圖片的寬 $(".ongimg_width").css("width",width_one + "px"); $(".ongimg_width").css("height",width_one + "px"); $(".twoimg_width").css("width",width_two + "px"); $(".twoimg_width").css("height",width_two + "px"); $(".threeimg_width").css("width",width_three + "px"); $(".threeimg_width").css("height",width_three + "px"); }else { $.toast(res.result); } } }); return false; })