jQuery根據文字框輸入實時模糊查詢全詞匹配 ，ajax非同步查詢
阿新 • • 發佈：2018-12-21
/*
***人員檢索start (ajax實時後臺獲取最新資料)
*/
![]()
![]()
![]()
![]()
//按姓名檢索
/* function submitForm_serch()
{
var devicdids = $("#deviceid").val();
var search_roles=$("#Police_number").val();
var search_names=$("#serch_name").val();
getPersonList(devicdids,search_roles,search_names);
} */
//按角色檢索
/* $("#Police_number").live("change",function(){
var devicdidss = $("#deviceid").val();
var search_roless=$("#Police_number").val();
var search_names=$("#serch_name").val('');
getPersonList(devicdidss,search_roless);
}); */
//////////////////////後臺資料獲取方法//////////////////////////////////////////////////////////////
function getPersonList(deviceid,search_role='0_',search_name=''){
var search_role=search_role;
var search_name=search_name;
var $role_name = $("#person_ingroup");
$.ajax({
url:'backdo.php',
type:'get',
data:{which:"API_READPERSON",sid:"<?php echo $_SESSION['token'];?>",devid:deviceid},
cache:false,
dataType:'json',
beforeSend:function(){
$("#person_ingroup").html("");
$(person_ingroup).append("正在匹配，請耐心等待...");
},
success:function(res){
if(res.code == 0){
$("#person_ingroup").html("");
$("#getuserinfo").css("display","none");
$("#getuserinfo").html("");
$role_name.html("");
$use_general = '<tr><td><input type="radio" value="-1" name="policeid" onfocus="SelectPolice(\'公用\',\'公用\')" >公用</td><td>公用</td><td>公用</td></tr>';
role = res.result.persons;
$role_name.append($use_general);
for(var $index=0;$index<role.length;$index++){
var name_role='';
if(role[$index].roleid.replace("_","") == 5){
name_role='五年級';
}else if(role[$index].roleid.replace("_","") == 4){
name_role='四年級';
}else if(role[$index].roleid.replace("_","") == 2){
name_role='二年級';
}else if(role[$index].roleid.replace("_","") == 3){
name_role='三年級';
}
if(search_role !== '0_' && search_name == ''){
if(role[$index].roleid.replace("_","") == search_role){
var $tr = '<tr><td><input type="radio" value="'+role[$index].personid+'" name="policeid" onfocus="SelectPolice(\''+role[$index].personid+'\',\''+role[$index].name+'\')" >'+role[$index].personid+'</td><td>'+role[$index].name+'</td><td>'+name_role+'</td></tr>';
$role_name.append($tr);
}
}else if(search_name !== ''){
if(role[$index].name == search_name){
var $tr = '<tr><td><input type="radio" value="'+role[$index].personid+'" name="policeid" onfocus="SelectPolice(\''+role[$index].personid+'\',\''+role[$index].name+'\')" >'+role[$index].personid+'</td><td>'+role[$index].name+'</td><td>'+name_role+'</td></tr>';
$role_name.append($tr);
}
}else if(search_role == '0_' && search_name == ''){
var $tr = '<tr><td><input type="radio" value="'+role[$index].personid+'" name="policeid" onfocus="SelectPolice(\''+role[$index].personid+'\',\''+role[$index].name+'\')" >'+role[$index].personid+'</td><td>'+role[$index].name+'</td><td>'+name_role+'</td></tr>';
$role_name.append($tr);
}
}
set_devicedid = deviceid;
}else{
$role_name.html("");
$("#getuserinfo").css("display","block");
$("#getuserinfo").html(res.errorinfo);
return false;
}
}
});
}
/*
***人員檢索start 通過點選按鈕開始篩選(前端資料過濾型)
*/
//第一種沒有按鈕
//實時篩選，不用點選按鈕
// var text = "";
// setInterval(function(){
// text = $('#serch_name').val();//獲取文字框輸入
// if($.trim(text) != ""){
// $("#person_ingroup tr:not('#theader')").hide().filter(":contains('"+text+"')").show();
// }else{
// $('#person_ingroup tr').show();//當刪除文字框的內容時，又重新顯示錶格所有內容
// }
// },100);
$(function(){
$('#search').click(function(){
var text = $('#serch_name').val();//獲取文字框輸入
if($.trim(text) != ""){
$("#person_ingroup tr:not('#theader')").hide().filter(":contains('"+text+"')").show();
}else{
$('#person_ingroup tr').show();
}
})
});
//有按鈕
$("#Police_number").live("change",function(){
var search_roless=$("#Police_number").find("option:selected").text();
if($.trim(search_roless) != ""){
if($.trim(search_roless) == "全部"){
$('#person_ingroup tr').show();;
}else{
//tr:not('#theader') 把tr標籤中不存在id="theader"的tr全部隱藏，filter遍歷隱藏的tr 將tr內容中包含搜尋內容的tr展示
//模糊匹配查詢（按分類）
//$("#person_ingroup tr:not('#theader')").hide().filter(":contains('"+search_roless+"')").show();
//全詞匹配查詢（按分類）filter遍歷隱藏的tr 將tr下面最後一個td內容等於搜尋內容的tr展示
$("#person_ingroup tr:not('#theader')").hide().filter(function(index){
return $('td:last', this).text() == search_roless;
//alert($('td:last', this).text());
}).show();
}
}
});
/*
***人員檢索end
*/
效果圖：
![]()
![]()
