基于jQuery使用Ajax動(dòng)態(tài)執(zhí)行模糊查詢功能
更新時(shí)間：2018年07月05日 10:29:35 作者：CarolLXW
這篇文章主要介紹了基于jQuery使用Ajax動(dòng)態(tài)執(zhí)行模糊查詢功能,通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
使用Ajax動(dòng)態(tài)執(zhí)行模糊查詢功能
•必須：需要一個(gè)執(zhí)行查詢的接口：
說明：
1.搜索模塊僅僅使用了boostrap的樣式以及Jquery.js文件
2.因?yàn)槲沂褂玫膌ayui的彈出層里面做的搜索ifram，所以確定和取消按鈕的關(guān)閉當(dāng)前頁面的功能都是layui的方式，如果不是ifram的窗口僅僅在當(dāng)前窗口執(zhí)行的情況下，可以使用下面的語句來進(jìn)行關(guān)閉當(dāng)前頁面的操作：
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'>沒有找到合適的結(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)閉本頁嗎?', {icon: 3, title: '您確定要關(guān)閉本頁嗎？'}, 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);
})
//刷新父頁面
parent.location.reload()
}
}
}
</script>
總結(jié)
以上所述是小編給大家介紹的基于jQuery使用Ajax動(dòng)態(tài)執(zhí)行模糊查詢功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(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 通過jQuery ajax獲取數(shù)據(jù)實(shí)現(xiàn)更新后重新渲染頁面的方法
- 使用jquery DataTable和ajax向頁面顯示數(shù)據(jù)列表的方法
- jQuery AJAX 方法success()后臺(tái)傳來的4種數(shù)據(jù)詳解
- 通過jquery的ajax請(qǐng)求本地的json文件方法
- jQuery中ajax請(qǐng)求后臺(tái)返回json數(shù)據(jù)并渲染HTML的方法
- jquery 通過ajax請(qǐng)求獲取后臺(tái)數(shù)據(jù)顯示在表格上的方法
- JQuery實(shí)現(xiàn)ajax請(qǐng)求的示例和注意事項(xiàng)
相關(guān)文章
jQuery實(shí)現(xiàn)Meizu魅族官方網(wǎng)站的導(dǎo)航菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)Meizu魅族官方網(wǎng)站的導(dǎo)航菜單效果,可實(shí)現(xiàn)導(dǎo)航菜單項(xiàng)鼠標(biāo)滑過出現(xiàn)下劃線動(dòng)態(tài)跟隨的功能,通過jQuery插件實(shí)現(xiàn)該功能,需要的朋友可以參考下2015-09-09
本篇文章主要是對(duì)JQuery中操作Css樣式的方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
這篇文章主要介紹了jQuery中map()方法用法,實(shí)例分析了map()方法的功能、定義及轉(zhuǎn)換數(shù)組的使用技巧,需要的朋友可以參考下2015-01-01
這是一個(gè)基于jquery的文字向上跑動(dòng)，其效果類似跑馬燈，在某些情況下還是比較實(shí)用的，下面與大家分享下實(shí)現(xiàn)代碼2014-09-09
jQuery-ui中自動(dòng)完成實(shí)現(xiàn)方法
關(guān)于jQuery-ui-1.8中的自動(dòng)完成控件，其匹配方式是使用正則表達(dá)式進(jìn)行匹配的。2010-06-06
jQuery實(shí)現(xiàn)指定區(qū)域外單擊關(guān)閉指定層的方法【經(jīng)典】
這篇文章主要介紹了jQuery實(shí)現(xiàn)指定區(qū)域外單擊關(guān)閉指定層的方法,可實(shí)現(xiàn)在彈出層外任意位置點(diǎn)擊關(guān)閉彈出層的功能,涉及jQuery事件操作方法,包含了詳盡的代碼功能說明,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-06-06
本文主要介紹了jQuery實(shí)現(xiàn)元素的插入--insertBefore（）和insertAfter（）方法，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
jQuery實(shí)現(xiàn)簡(jiǎn)單滾動(dòng)動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單滾動(dòng)動(dòng)畫效果的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
easyui datagrid 表格中操作欄 按鈕圖標(biāo)不顯示的解決方法
下面小編就為大家?guī)硪黄猠asyui datagrid 表格中操作欄 按鈕圖標(biāo)不顯示的解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了編寫自己的jQuery提示框（Tip）插件的方法,需要的朋友可以參考下2015-02-02