<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="role_wrapper_2"> <div class="admin2_search"> <form> <input class="role-search-approval" type="search" placeholder="Enter your keyword"> </form> </div> </div>
我使用jQuery在页面加载时添加一些数据，还添加了一个搜索框供用户更快地找到这些数据，它将逐字搜索。
例如，仅键入“ a”将发现所有包含“ a”的数据，或者键入“ ab”将发现所有包含“ ab”的数据。
如何执行此搜索功能？
你可能会推动所有的jQuery元素添加到数组，然后遍历roles阵列和执行.indexOf()
$(document).ready(function(){ $(function(){ var roles = ["Admin", "User", "Dealer", "Agent", "Buyer", "Guest", "User", "Dealer", "Agent"]; var elements = []; $.each(roles, function(){ var element = $("<div class='roles_approval'><span>" + this + "</span></div>"); elements.push(element); $(".role_wrapper_2").append(element); }); $(".role-search-approval").on("keyup" /* or input event*/, function() { var value = this.value.toLowerCase(); for(var i = 0; i < roles.length; i++) { if(roles[i].toLowerCase().indexOf(value) !== -1) { elements[i].show(); } else { elements[i].hide(); } } }); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="role_wrapper_2"> <div class="admin2_search"> <form> <input class="role-search-approval" type="search" placeholder="Enter your keyword"> </form> </div> </div>
另外，如果您不想将它们压入额外的数组，则可以在keyup上循环$(".roles_approval")并在文本内容上执行indexOf。
$(".role-search-approval").on("keyup" /* or input event*/, function() {
var value = this.value.toLowerCase();
$(".roles_approval").each(function() {
if($(this).text().toLowerCase().indexOf(value) !== -1) {
$(this).show();
} else {
$(this).hide();
}
});
});