基于jQuery使用Ajax動(dòng)態(tài)執(zhí)行模糊查詢功能
使用Ajax動(dòng)態(tài)執(zhí)行模糊查詢功能
•必須:需要一個(gè)執(zhí)行查詢的接口:
說(shuō)明:
1.搜索模塊僅僅使用了boostrap的樣式以及Jquery.js文件
2.因?yàn)槲沂褂玫膌ayui的彈出層里面做的搜索ifram,所以確定和取消按鈕的關(guān)閉當(dāng)前頁(yè)面的功能都是layui的方式,如果不是ifram的窗口僅僅在當(dāng)前窗口執(zhí)行的情況下,可以使用下面的語(yǔ)句來(lái)進(jìn)行關(guān)閉當(dāng)前頁(yè)面的操作:
window.opener=null; window.open('','_self'); window.close();
效果展示:
引用三方功能模塊:
<!--jquery--> <script src="assets/scripts/jquery.js" type="application/javascript"></script> <link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="external nofollow" > <!--layui--> <link rel="stylesheet" href="assets/vendor/layui/css/layui.css" rel="external nofollow" > <script type="application/javascript" src="assets/vendor/layui/layui.js"></script>
樣式:
<style> /*html { -ms-overflow-style:none; overflow:-moz-scrollbars-none; } html::-webkit-scrollbar{width:0px}*/ #select_template_group{ position: fixed; float: left; display: none; } .selected_keywords{ display: none; position: fixed; width: 590px; max-height: 300px; margin-top: 35px; z-index: 10002; } .selected_keywords > ul{ max-height: 300px; min-width: 590px; display: inline-block; overflow-y: scroll; overflow-x: hidden; } .list-group-item:hover{ color: #2E2D3C; background: #00AAFF; } #basic-addon1 > img{ width: 80%; height: 80%; } </style>
HTML代碼:
<body> <!-- WRAPPER --> <div id="wrapper"> <!-- NAVBAR --> <div id="nav"></div> <!-- END NAVBAR --> <!-- END LEFT SIDEBAR --> <!-- MAIN --> <div class="main"> <!-- MAIN CONTENT --> <div class="main-content"> <div class="container-fluid" style="width: 700px;"> <div class="form-horizontal"> <!--查詢位置--> <div class="input-group" id=""> <span class="input-group-addon" id="sizing-addon2">選擇模版</span> <input type="text" class="form-control" placeholder="選擇模版,支持模糊查詢" aria-describedby="sizing-addon2" id="fuzzy_search" oninput="template_choise(this)"> <!--搜索結(jié)果顯示--> <div class="input-group selected_keywords"></div> </div> <!--展示位置--> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title">已選擇模版</h4> </div> <div class="panel-body" id="results_2"></div> </div> <!--功能按鈕--> <div class="form-group" style="float: left;margin-left: 25%"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default" onclick="tsg_confirm()">確認(rèn)</button> </div> </div> <div class="form-group" style="float: left;margin-left: 30px"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default" onclick="tsg_cancle()">取消</button> </div> </div> </div> </div> </div> <!-- END MAIN CONTENT --> </div> <!-- END MAIN --> </div> <!-- END WRAPPER --> </body> </html>
Javascript代碼:
<script> //點(diǎn)擊空白區(qū)域隱藏搜索結(jié)果內(nèi)容 $(document).click(function(e){ var _con = $('.selected_keywords'); // 設(shè)置目標(biāo)區(qū)域 if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1 // todo $(".selected_keywords").css("display","none") } }); // 搜索選擇功能 function template_choise(obj) { // console.log($(obj).val().length) // 判斷輸入框內(nèi)容為空的時(shí)候 if ($(obj).val().length == 0){ $(".selected_keywords").css("display","none") var selected_keywords = $(".selected_keywords") selected_keywords.empty() } else { //獲取setinterval的索引 var index = window.setInterval(function () { // 獲取輸入框中的搜索關(guān)鍵字 var serach_keywords = $(obj).val() var list_template = "<ul class='list-group'></ul>" //執(zhí)行模糊查詢功能,延遲200ms $.ajax({ type: "POST", url: "/admin/tsg_fuzzy_search", data: { "keywords": serach_keywords }, dataType: "json", success: function (data) { $(".selected_keywords").css("display", "block") $(".selected_keywords").html(list_template) $(".list-group").empty() var code = data["code"] var data = data["data"] //判斷是否存在搜索結(jié)果 if(code == "000000") { $.each(data, function (i, data) { var data_complte = data["template_rule_name"] + "," + data["template_name"] + "," + data["template_desc"] var html_style = "<a href='javascript:'><li class='list-group-item' onclick='choise_one_template(this)'>" + data_complte + "</li></a>" $(".list-group").append(html_style) }) } else if(code == "200000"){ $(".list-group").append("<li class='list-group-item'>沒(méi)有找到合適的結(jié)果</li>") } //清除當(dāng)前interval window.clearInterval(index) }, fail: function () { alert("查詢失敗") } }) // 延時(shí)200ms }, 200) } } //添加選擇的模版到展示欄 function choise_one_template(obj) { //獲取選擇的值 var template_data = $(obj).text() //拆分獲取的數(shù)據(jù) var selected_template = template_data.split(",") //獲取指定的數(shù)據(jù) selected_template = selected_template[1] // console.log(selected_template) //制作html var selected_template_html = "<button type='button' class='btn btn-default template_data' aria-label='Left Align'><span class='glyphicon glyphicon-remove' aria-hidden='true' onclick='delete_template(this)'></span> "+selected_template+"</button>" //在指定div內(nèi)插入html $("#results_2").append(selected_template_html) } //刪除當(dāng)前已選擇的template function delete_template(obj) { //獲取選擇的值數(shù)據(jù) var template_data_selected = $(obj).text() console.log(template_data_selected) //獲取當(dāng)前刪除的html內(nèi)容 var father_button_html = $(obj).closest("button") //從指定容器中刪除該內(nèi)容 father_button_html.remove() } //關(guān)閉當(dāng)前ifram function tsg_cancle(){ layui.use('layer', function() { var layer = layui.layer layer.confirm('您確定要關(guān)閉本頁(yè)嗎?', {icon: 3, title: '您確定要關(guān)閉本頁(yè)嗎?'}, function (index) { //清除已選擇的模版信息 // localStorage.removeItem("selected_template_data") //清除已排序的模板信息 localStorage.removeItem("template_data_sorted") var layer = layui.layer; var index = parent.layer.getFrameIndex(window.name); //先得到當(dāng)前iframe層的索引 parent.layer.close(index); //再執(zhí)行關(guān)閉 layer.close(index); }) }) } //確認(rèn)按鈕=提交 function tsg_confirm() { var selected_template_datas = [] $(".template_data").each(function (i,element) { selected_template_datas[i] = $(element).text() }) localStorage.setItem("template_data_sorted",selected_template_datas) layui.use('layer', function() { var layer = layui.layer var layer = layui.layer; var index = parent.layer.getFrameIndex(window.name); //先得到當(dāng)前iframe層的索引 parent.layer.close(index); //再執(zhí)行關(guān)閉 layer.close(index); }) //刷新父頁(yè)面 parent.location.reload() } } } </script>
總結(jié)
以上所述是小編給大家介紹的基于jQuery使用Ajax動(dòng)態(tài)執(zhí)行模糊查詢功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- JQuery Ajax執(zhí)行跨域請(qǐng)求數(shù)據(jù)的解決方案
- 為jquery的ajax請(qǐng)求添加超時(shí)timeout時(shí)間的操作方法
- jQuery的Ajax接收java返回?cái)?shù)據(jù)方法
- Vue.js 通過(guò)jQuery ajax獲取數(shù)據(jù)實(shí)現(xiàn)更新后重新渲染頁(yè)面的方法
- 使用jquery DataTable和ajax向頁(yè)面顯示數(shù)據(jù)列表的方法
- jQuery AJAX 方法success()后臺(tái)傳來(lái)的4種數(shù)據(jù)詳解
- 通過(guò)jquery的ajax請(qǐng)求本地的json文件方法
- jQuery中ajax請(qǐng)求后臺(tái)返回json數(shù)據(jù)并渲染HTML的方法
- jquery 通過(guò)ajax請(qǐng)求獲取后臺(tái)數(shù)據(jù)顯示在表格上的方法
- JQuery實(shí)現(xiàn)ajax請(qǐng)求的示例和注意事項(xiàng)
相關(guān)文章
Javascript 使用ajax與C#獲取文件大小實(shí)例詳解
本文章向碼農(nóng)們介紹了js ajax獲取文件大小的實(shí)例,涉及JavaScript調(diào)用ajax交互及后臺(tái)C#文件操作的相關(guān)技巧,需要的朋友可以參考下2017-01-01JS中Array數(shù)組學(xué)習(xí)的總結(jié)
本文主要介紹了JS中Array數(shù)組的相關(guān)知識(shí)。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01Bootstrap中點(diǎn)擊按鈕后變灰并顯示加載中實(shí)例代碼
Bootstrap插件非常的好用了,今天小編通過(guò)本教程給大家介紹Bootstrap中點(diǎn)擊按鈕后變灰并顯示加載中實(shí)例代碼,非常不錯(cuò),感興趣的朋友一起看看吧2016-09-09jQuery中的deferred對(duì)象和extend方法詳解
本篇文章主要介紹了jQuery中的deferred對(duì)象和extend方法,具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-05-05jQuery AJAX 調(diào)用WebService實(shí)現(xiàn)代碼
用jQuery調(diào)用其他項(xiàng)目的WebService的代碼,需要的朋友可以參考下。2010-03-03深入理解jQuery中l(wèi)ive與bind方法的區(qū)別
本篇文章主要是對(duì)jQuery中l(wèi)ive與bind方法的區(qū)別進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12