jQuery根據文本框輸入實時模糊查詢全詞匹配 ,ajax異步查詢


 
/*
***人員檢索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
*/
效果圖:
 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM