Sistema de pesquisa de membros

Detalhes da questão

Endereço do fórum: https://testandoforumeiros.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Olá, gostaria de saber se tem como colocar um menu de pesquisa de membros na index

Ao pesquisar aparecesse os membros de acordo com o nick e ao chegar no nick desejado (digitado completo) aparecesse o perfil do usuário com seu avatar e o nome e ao clickar no nome ser redirecionado pro perfil, agradeço

Olá @sucodemaracaju,

Bem-vindo ao Fórum dos Fóruns! Seja bem-vindo ao Fórum dos Fóruns! Como acabou de se inscrever, veja aqui alguns links importantes a saber: Regras do Fórum, e o que você não deve fazer neste fórum; Lista de tutoriais e perguntas frequentes; A Equipe de Suporte; A função de busca.

Já fiz o código, porém preciso saber se o senhor vai quer usar a busca em todas as páginas ou só na página inicial? (Preciso saber para ajustar no tema da versão #modernbb)


Aguardo uma resposta sua,
pedxz.

Olá, pedxz

só na página inicial

agradeço

Crie uma nova página JavaScript com investimento na página inicial, e use o seguinte código:

Código:

(function($) {
    'use strict';

    var config = {
        desc: 'Busca rápida de um membro',
        input: 'Digite o nome'
    };

    $(function() {

        if (!_userdata.session_logged_in) return;

        $('<div>', {
            id: 'find-user-box',
            class: 'panel'
        }).html([
            '<h3 style="border-bottom: 0;">' + config.desc + '</h3>',
            '',
            '<input type="text" id="find-user-search" class="inputbox search" size="50" style="width: -webkit-fill-available" placeholder="' + config.input + '" />',
            '<dl>',
            '<dd><div id="users" style="display: none; background: white; border: 1px solid #ccc; width: -webkit-fill-available; max-height: 300px;overflow-y: auto;"></div>',
            '</dd>',
            '</dl>'
        ].join('\n')).css({
            'box-shadow': 'none',
            'background': 'transparent',
            'width': '40%',
            'float': 'right',
            'position': 'relative',
            'height': 'max-content',
            'padding': '6px'
        }).insertAfter('.linklist.top');

        $('#find-user-search').keyup(function() {
            var $this = $(this);
            $.ajax({
                url: '/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=' + $this.val(),
                type: 'GET',
                success: function(d) {
                    $('#users').show().html($('#memberlist tbody', d).html());
                    $('.avatar-mini').nextAll().remove();
                    if ($this.val() == "") {
                        $('#users').hide();
                    }
                }
            });
        });


    });
})(jQuery);

Ficou muito bom!
Só queria saber se tem como fazer alguns ajustes, acrescentar um "CSS" para ficar mais bonito e do jeito que eu eu pensei

Olha, a barra de pesquisa pode ter esse visual?
O redondo de preferência

e, tem como as informações serem mais abrangentes?
tipo quando aparecer e passar o mouse em cima, aparecer em hover um mini painel contendo as informações básicas? e tudo isso ser numa escala maior, tem como? ah, e "busca rápida de um membro" ter mais destaque rsrs

Desculpe pedir demais kkkk

abraço s2

sucodemaracaju escreveu:e, tem como as informações serem mais abrangentes?
tipo quando aparecer e passar o mouse em cima, aparecer em hover um mini painel contendo as informações básicas? e tudo isso ser numa escala maior, tem como? ah, e "busca rápida de um membro" ter mais destaque rsrs

Acho que com a instalação do Hovercard não existe a necessidade de aumentar o conteúdo, já que o método usado só vai buscar pouca informação a lista de membros, altere o código para:

Código:

(function($) {
    'use strict';
 
    var config = {
        desc: 'Busca rápida de um membro',
        input: 'Digite o nome'
    };
 
    $(function() {
 
        if (!_userdata.session_logged_in) return;
 
        $('<div>', {
            id: 'find-user-box',
            class: 'panel'
        }).html([
            '<h3 style="border-bottom: 0;font-weight: bolder; color: #22A7F0">' + config.desc + '</h3>',
            '',
            '<input type="text" id="find-user-search" class="/*inputbox search*/" size="50" style="width: -webkit-fill-available; background: white; border-radius: 20px;box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1); padding: 1em;" placeholder="' + config.input + '" />',
            '<dl>',
            '<dd><div id="users" style="display: none; background: white; border: 1px solid #ccc; width: -webkit-fill-available; max-height: 300px;overflow-y: auto;"></div>',
            '</dd>',
            '</dl>'
        ].join('\n')).css({
            'box-shadow': 'none',
            'background': 'transparent',
            'width': '40%',
            'float': 'right',
            'position': 'relative',
            'height': 'max-content',
            'padding': '6px'
        }).insertAfter('.linklist.top');
 
        $('#find-user-search').keyup(function() {
            var $this = $(this);
            $.ajax({
                url: '/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=' + $this.val(),
                type: 'GET',
                success: function(d) {
                    $('#users').show().html($('#memberlist tbody', d).html());
                    $('.avatar-mini').nextAll().remove();
                    if ($this.val() == "") {
                        $('#users').hide();
                    }
                }
            });
        });
 
      $('<style>')
            .text('*:focus { outline: none; }')
            .appendTo('head');
 
    });
})(jQuery);

fiz tudo no paint desculpa a demora kkkk (categorias só pra enfeite) queria colocar um font-awesome se possível

queria um menu mesmo sabe, algo desse tipo

queria que ficasse algo assim:





Assim fica quando pesquisa:


o preto seria o avatar

Altere para:

Código:

(function($, CSS) {
    'use strict';

    var config = {
        desc: 'Busca rápida de um membro',
        input: 'Digite o nome',
        icon: 'ion-android-search'
    };

    $(function() {

        if (!_userdata.session_logged_in) return;
        if (!config.desc || !config.input || !config.icon) return;

        $('<div>', {
                id: 'find-user-box',
                class: 'module'
            }).html([
                '<div class="h3"><i class="' + config.icon + '"></i> ' + config.desc + '</div>',
                '<div class="input-wrap">',
                ' <input type="text" id="find-user-search" class="inputbox" size="50" placeholder="' + config.input + '" />',
                '</div>',
                '<dl>',
                ' <dd>',
                '  <div id="users"></div>',
                ' </dd>',
                '</dl>'
            ].join('\n'))
            .insertAfter('.linklist.top');

        $('#find-user-search').keyup(function() {
            var $this = $(this);
            $.ajax({
                url: '/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=' + $this.val(),
                type: 'GET',
                success: function(d) {
                    $('#users').show().html($('#memberlist tbody', d).html()).css({
                        'width': '100%!important',
                        'border-top': '1px dashed #ccc'
                    });
                    $('.avatar-mini').nextAll().remove();
                    if ($this.val() == "") {
                        $('#users').hide();
                    }
                }
            });
        });

        $('<style>')
            .text(CSS.join('\n'))
            .appendTo('head');

    });
}(jQuery, [
    '#find-user-box {',
    'width: 40%;',
    'float: right;',
    'position: relative;',
    'height: max-content;',
    '}',
    '',
    '#find-user-box input,',
    '#find-user-box .users {',
    'width: -webkit-fill-available;',
    '}',
    '',
    '#find-user-box #users {',
    'display: none;',
    'max-height: 300px;',
    'overflow-y: auto;',
    '}',
    '',
    '#find-user-box #users [class^="row"] {',
    'display: block!important;',
    'width: 100%!important;',
    'padding: 0 9px;',
    'margin-bottom: 3px!important;',
    '}',
    '#find-user-box #users [class^="row"]:first-child {',
    'margin-top: 5px;',
    '}',
    ''
]));

Valeu mano!!!

Obrigadão, caso eu esteja fazendo para alguém e ele não quiser o Hovercard, teria como acrescentar as informações quando pesquisa?

sucodemaracaju escreveu:Valeu mano!!!

Obrigadão, caso eu esteja fazendo para alguém e ele não quiser o Hovercard, teria como acrescentar as informações quando pesquisa?

As únicas informações que dá para adicionar é as que existem da página "Membros": https://ajuda.forumeiros.com/memberlist

Beleza, sem problemas o que der para adicionar da bom demais kkk

Tópico desbloqueado.

(A pedido do autor)

Então, a questão era o seguinte.
Não queria postar o print pq iriam dizer q era plagio kkk

https://imgur.com/SEokp6G

queria uma aba assim, diferente, mas com o mesmo conceito..

Queria uma coisa mais bonita sabe, aí vinha a API que eu disse..

Segundo o nosso regulamento de suporte é proibido mais que uma questão no mesmo tópico; Se a questão inicial "Sistema de pesquisa rápida de membros" foi resolvida, diga que marcaremos como resolvida. A sua questão em cima terá que criar uma nova questão.


Atenciosamente,
pedxz.

Beleza vou criar
fecha denovo s2 kkk