Làm thế nào để nhiều danh sách bộ lọc sử dụng jquery/javascript

Question

Tôi có một html nơi tôi có thể lọc dựa trên dữ liệu của họ nhưng tôi không biết làm thế nào để kết hợp nó.

Đây là tập lệnh của tôi và tên tìm kiếm đang hoạt động nhưng nút radio isActive vẫn không hoạt động và cần thêm vào bộ lọc của tôi. Tôi không biết làm thế nào để và nó trên bộ lọc.

$('input[type=text][name=search_name').on('input', function(e) { 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 

 
    var fullname = $(this).val(); 
 
    var isActive = $('input[type=radio][name=isActive]').val(); 
 
    searchStudent(fullname, isActive); 
 
}); 
 

 
$('input[type=radio][name=isActive]').on('change', function(e) { 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 

 
    var fullname = $('input[type=text][name=search_name').val(); 
 
    var isActive = $(this).val(); 
 
    searchStudent(fullname, isActive); 
 
}); 
 

 
function searchStudent(fullname, isActive) { 
 
    $("ul li").each(function() { 
 
    // I don't know how to add the isActive 
 
    if ($(this).data('fullname').search(new RegExp(fullname, "i")) < 0) { 
 
     $(this).hide(); 
 
    } else { 
 
     $(this).show(); 
 
    } 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="text" name="search_name"> 
 
    <span><input type="radio" checked="" autocomplete="off" value="2" name="isActive"> All</span> 
 
    <span><input type="radio" autocomplete="off" value="1" name="isActive"> Active</span> 
 
    <span><input type="radio" autocomplete="off" value="0" name="isActive"> Inactive</span> 
 
</div> 
 

 
<ul> 
 
    <li data-fullname="Jerald Patalinghug" data-firstname="Jerald" data-lastname="Patalinghug" data-isActive="1">Jerald Patalinghug</li> 
 
    <li data-fullname="Eldrin Gok-ong" data-firstname="Eldrin" data-lastname="Gok-ong" data-isActive="1">Eldrin Gok-ong</li> 
 
    <li data-fullname="Uelmar Ortega" data-firstname="Uelmar" data-lastname="Ortega" data-isActive="0">Uelmar Ortega</li> 
 
</ul>

nên khi tôi chọn all = 2, sau đó tôi sẽ thấy tất cả mọi người, active = 1 tôi sẽ thấy những hoạt động, sau đó inActive = 0 để xem những người không hoạt động.

Answer 1

tôi sẽ đề nghị sử dụng một update chức năng duy nhất mà bạn gọi khi cả hai đầu vào hoặc thay đổi TextField. Trong update chức năng này, bạn sẽ truy vấn các hộp kiểm chọn và trường văn bản.

giải pháp khác sẽ bao hàm sự ghi nhận giá trị đã chọn hoặc trước lựa chọn các yếu tố có liên quan để tránh truy vấn DOM mỗi lần, nhưng theo ý kiến ​​của tôi, nó không phải là giá trị nó.

$('input[type=text][name=search_name').on('input', updateFilter); 
 
$('input[type=radio][name=isActive]').on('change', updateFilter); 
 

 
function updateFilter(){ 
 
    var fullname = $('input[type=text][name=search_name').val(); 
 
    var isActive = $('input[type=radio][name=isActive]:checked').val(); 
 
    searchStudent(fullname, +isActive); 
 
} 
 

 
function searchStudent(fullname, isActive) { 
 
    $("ul li").each(function() { 
 
    if ($(this).data('fullname').search(new RegExp(fullname, "i")) < 0 
 
     || isActive !== 2 && +$(this).data('isactive') !== isActive) { 
 
     $(this).hide(); 
 
    } else { 
 
     $(this).show(); 
 
    } 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="text" name="search_name"> 
 
    <span><input type="radio" checked="true" autocomplete="off" value="2" name="isActive"> All</span> 
 
    <span><input type="radio" autocomplete="off" value="1" name="isActive"> Active</span> 
 
    <span><input type="radio" autocomplete="off" value="0" name="isActive"> Inactive</span> 
 
</div> 
 

 
<ul> 
 
    <li data-fullname="Jerald Patalinghug" data-firstname="Jerald" data-lastname="Patalinghug" data-isActive="1">Jerald Patalinghug</li> 
 
    <li data-fullname="Eldrin Gok-ong" data-firstname="Eldrin" data-lastname="Gok-ong" data-isActive="1">Eldrin Gok-ong</li> 
 
    <li data-fullname="Uelmar Ortega" data-firstname="Uelmar" data-lastname="Ortega" data-isActive="0">Uelmar Ortega</li> 
 
</ul>

Answer 2

Thay đổi selector jQuery của bạn để loại trừ data-isActive thuộc tính bạn không muốn:

$("ul li:not([data-isActive='0'])").each(function() { 
    ... 
} 

Answer 3

Chỉ cần thêm một dấu check ở mục if-tuyên bố hiện tại. Tôi đã refactor mã của bạn một chút, kể từ khi tôi đã có một số vấn đề bản thân mình. Đây là chủ yếu vì IDE của tôi đã làm phiền tôi ...

Nhưng hoạt động của đoạn và tôi hy vọng nó sẽ giúp bạn ra ngoài.

$("input[name='search_name']").on("input", function() { 
 
\t var fullname = $(this).val(); 
 
    var isActive = $("input[type='radio'][name='isActive']:checked").val(); 
 
    
 
    searchStudent(fullname, isActive); 
 
    
 
    //If input is empty, just trigger the checked radiobutton 
 
    if(fullname === "") \t 
 
    \t $("input[type='radio'][name='isActive']:checked").change(); 
 
}); 
 

 

 
$("input[name='isActive']").change(function() { 
 
\t var fullname = $("input[name='search_name']").val(); 
 
    var isActive = $(this).val(); 
 
    
 
    searchStudent(fullname, isActive); 
 
}) 
 

 

 
function searchStudent(pFullName, pIsActive) 
 
{ 
 
\t $("ul li").each(function() { 
 
    \t var element = $(this); 
 
    var isActive = element.attr("data-isActive"); 
 
    
 
    if((element.data("fullname").search(new RegExp(pFullName, "i")) >= 0) && parseInt(isActive) === parseInt(pIsActive)) 
 
    \t element.show(); 
 
    else 
 
    \t element.hide(); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" name="search_name"> 
 
<span><input type="radio" checked="" autocomplete="off" value="2" name="isActive"> All</span> 
 
<span><input type="radio" autocomplete="off" value="1" name="isActive"> Active</span> 
 
<span><input type="radio" autocomplete="off" value="0" name="isActive"> Inactive</span> 
 

 

 
<ul> 
 
    <li data-fullname="Jerald Patalinghug" data-firstname="Jerald" data-lastname="Patalinghug" data-isActive="1">Jerald Patalinghug</li> 
 
    <li data-fullname="Eldrin Gok-ong" data-firstname="Eldrin" data-lastname="Gok-ong" data-isActive="1">Eldrin Gok-ong</li> 
 
    <li data-fullname="Uelmar Ortega" data-firstname="Uelmar" data-lastname="Ortega" data-isActive="0">Uelmar Ortega</li> 
 
</ul>