Memberlist search without reload

Forum versions: phpBB3, PunBB, ModernBB and AwesomeBB
Description: This code will allow you to search through member list without need to press OK. It will automatically update the list for you in members list.



1. AP > Modules > Javascirpt > Make a new script and apply to all pages. Name it "Memberlist search without reload" and paste this code for:

phpBB3, PunBB and ModernBB

Code:

$(document).ready(function() {
    if (window.location.href.includes("/memberlist")) {
        var membersPerPage = 10; // Set to the number of members shown
        var allMembers = []; // Array to hold all loaded members
 
        // Clear existing members in the list
        $('#memberlist tbody').empty();
 
        // Function to load all member list pages via AJAX
        function loadAllMembers(page) {
            var pageUrl = '/memberlist?start=' + ((page - 1) * membersPerPage);
         
            $.ajax({
                url: pageUrl,
                success: function(data) {
                    var newMembers = $(data).find('#memberlist tbody tr'); // Get member rows
 
                    // If no new members are found, stop loading and enable search
                    if (newMembers.length === 0) {
                        displayInitialMembers();
                        enableSearch(); // Enable search after loading
                        return;
                    }
 
                    // Add new members to allMembers array
                    newMembers.each(function() {
                        var memberRow = $(this);
                        var username = memberRow.find('td.avatar-mini strong').text().trim(); // Get username
                        if (!allMembers.some(member => member.find('td.avatar-mini strong').text().trim() === username)) { // Only add unique members
                            allMembers.push(memberRow); // Store the entire row
                        }
                    });
 
                    // Load the next page recursively
                    loadAllMembers(page + 1);
                }
            });
        }
 
        // Function to display the initial members
        function displayInitialMembers() {
            $('#memberlist tbody').empty(); // Clear existing members
            for (var i = 0; i < Math.min(membersPerPage, allMembers.length); i++) {
                $('#memberlist tbody').append(allMembers[i]); // Show initial members
            }
        }
 
        // Function to enable search functionality
        function enableSearch() {
            $('input[name="username"]').on('keyup', function() {
                var searchQuery = $(this).val().toLowerCase();
 
                $('#memberlist tbody').empty(); // Clear displayed members
                if (searchQuery === '') {
                    // If search query is empty, display all members
                    displayInitialMembers();
                } else {
                    allMembers.forEach(function(member) {
                        var username = member.find('td.avatar-mini strong').text().toLowerCase(); // Get username
 
                        // Show or hide the member based on the search query
                        if (username.startsWith(searchQuery)) {
                            $('#memberlist tbody').append(member); // Show matching member
                        }
                    });
                }
            });
        }
 
        // Start loading all members from page 1
        loadAllMembers(1);
    }
});

Save and check it out.

AwesomeBB

Code:

$(document).ready(function() {
    if (window.location.href.includes("/memberlist")) {
        var membersPerPage = 10; // Set to the number of members shown per page
        var allMembers = []; // Array to hold all loaded members

        // Clear existing members in the list
        $('#memberlist').empty();

        // Function to load all member list pages via AJAX
        function loadAllMembers(page) {
            var pageUrl = '/memberlist?start=' + ((page - 1) * membersPerPage);
           
            $.ajax({
                url: pageUrl,
                success: function(data) {
                    var newMembers = $(data).find('#memberlist .member-block'); // Get member blocks

                    // If no new members are found, stop loading and enable search
                    if (newMembers.length === 0) {
                        displayInitialMembers();
                        enableSearch(); // Enable search after loading
                        return;
                    }

                    // Add new members to allMembers array
                    newMembers.each(function() {
                        allMembers.push($(this)); // Store the entire block
                    });

                    // Load the next page recursively
                    loadAllMembers(page + 1);
                },
                error: function() {
                    console.error("Failed to load page " + page); // Keep error log for troubleshooting
                }
            });
        }

        // Function to display the initial members
        function displayInitialMembers() {
            $('#memberlist').empty(); // Clear existing members
            for (var i = 0; i < Math.min(membersPerPage, allMembers.length); i++) {
                $('#memberlist').append(allMembers[i]); // Show initial members
            }
        }

        // Function to enable search functionality
        function enableSearch() {
            $('input[name="username"]').on('keyup', function() {
                var searchQuery = $(this).val().toLowerCase();

                $('#memberlist').empty(); // Clear displayed members
                if (searchQuery === '') {
                    // If search query is empty, display all members
                    displayInitialMembers();
                } else {
                    allMembers.forEach(function(member) {
                        var username = $(member).find('.member-header strong').text().toLowerCase(); // Get username

                        // Show or hide the member based on the search query
                        if (username.startsWith(searchQuery)) {
                            $('#memberlist').append(member); // Show matching member
                        }
                    });
                }
            });
        }

        // Start loading all members from page 1
        loadAllMembers(1);
    }
});


Pay attention to variable

Code: var membersPerPage = 10;

If your forum shows more than 10 members per page, change the number.

Save and check.

Additional note: I haven't tried this for large forums (with thousands of users). My guess is that this will cause slow loading because the script is fetching all users on your forum page by page and that takes time if you have many pages for members.


Bonus content:
For those who use this memberlist from this tutorial: https://help.forumotion.com/t163640-change-memberlist-apperance-phpbb3
Use this script:

Code:

$(document).ready(function() {
    if (window.location.href.includes("/memberlist")) {
        var membersPerPage = 12; // Set to the number of members shown
        var allMembers = []; // Array to hold all loaded members

        // Clear existing members in the list
        $('.member-list').empty();

        // Function to load all member list pages via AJAX
        function loadAllMembers(page) {
            var pageUrl = '/memberlist?start=' + ((page - 1) * membersPerPage);

            $.ajax({
                url: pageUrl,
                success: function(data) {
                    var newMembers = $(data).find('.member-card'); // Get member cards

                    // If no new members are found, stop loading and enable search
                    if (newMembers.length === 0) {
                        displayInitialMembers();
                        enableSearch(); // Enable search after loading
                        return;
                    }

                    // Add new members to allMembers array
                    newMembers.each(function() {
                        var memberCard = $(this);
                        var username = memberCard.find('.username strong').text().trim(); // Get username
                        // Only add unique members based on the username
                        if (!allMembers.some(member => member.find('.username strong').text().trim() === username)) {
                            allMembers.push(memberCard); // Store the entire card
                        }
                    });

                    // Load the next page recursively
                    loadAllMembers(page + 1);
                }
            });
        }

        // Function to display the initial members
        function displayInitialMembers() {
            $('.member-list').empty(); // Clear existing members
            for (var i = 0; i < Math.min(membersPerPage, allMembers.length); i++) {
                $('.member-list').append(allMembers[i]); // Show initial members
            }
        }

        // Function to enable search functionality
        function enableSearch() {
            $('input[name="username"]').on('keyup', function() {
                var searchQuery = $(this).val().toLowerCase();

                $('.member-list').empty(); // Clear displayed members
                if (searchQuery === '') {
                    // If search query is empty, display all members
                    displayInitialMembers();
                } else {
                    allMembers.forEach(function(member) {
                        var username = member.find('.username strong').text().toLowerCase(); // Get username

                        // Show or hide the member based on the search query
                        if (username.startsWith(searchQuery)) {
                            $('.member-list').append(member); // Show matching member
                        }
                    });
                }
            });
        }

        // Start loading all members from page 1
        loadAllMembers(1);
    }
});