[ModernBB] Problème avec la recherche instantané

[orpheus]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://pokemon-anime.forumactif.com

Description du problème

Bonjour à tous ! ^^

Voila, j'ai installé aujourd'hui sur mon forum le javascript que j'utilise sur un autre forum (voir celui de mon profil) qui permet d'afficher en "temps réel" les résultats de la recherche sans avoir à valider mais je rencontre quelques soucis.

Le premier est lié à la toolbar.
Comme vous pouvez le constater ci-dessus, lorsque j'effectue une recherche, l'intitulé « résultat de la recherche » est coupé en deux avec le mot "recherche" qui s'entremêle aux résultats en fond.
Je souhaiterai savoir comment aligner toute la phrase sur une seule ligne ou à défaut, comment raccourcir l'intitulé car en l'état, c'est pas beau à voir ! ^^'

Le second problème est directement lié au bouton rechercher.
Lorsque j'effectue une recherche en restant tout en haut du forum, voici ce que j'ai :


Il faut descendre un peu pour avoir tous les résultats :


J'aimerai savoir comment résoudre ce problème car c'est assez gênant si on ne sait pas qu'il faille descendre pour avoir accès à l'intégralité des résultats  ...

Merci.

Edit : je viens de m'apercevoir que le sujet a pas été placé dans la bonne section à savoir « Problème avec un script, un code », si un modérateur peut faire le nécessaire ... Merci d'avance.

[orpheus]

Up !

Par ailleurs, j'en profite pour renouveler ma demande (j'ignore si elle a été vu par les modérateurs vu que je l'avais indiqué en éditant le post) :

Edit : je viens de m'apercevoir que le sujet a pas été placé dans la bonne section à savoir « Problème avec un script, un code », si un modérateur peut faire le nécessaire ... Merci d'avance.

[orpheus]

up !

[orpheus]

up !

[orpheus]

up !

[mSyx]

Oy o/
Pour le deuxième problème, je n'arrive pas à le reproduire :/

Pour le premier, tu peux:

Réduire la police


Ajouter ce code ou le remplacer dans le code déjà présent:

Code:

.fa_ajax_search-title {
    font-size: 13px !important;
}

Agrandir la fenêtre


Ajouter ce code ou le remplacer dans le code déjà présent:

Code:

.fa_ajax_search-results {
    width: 250px;
}

On peut également changer Résultats de la recherche en autre chose (ex.: Résultats, Recherche) - mais pour ça, il faudrait le code et/ou le script :b

[orpheus]

Coucou, tout d'abord, merci pour ton aide.

Je veux bien l'astuce pour changer l'intitulé.
Voici le script que j'ai utilisé :

Code:

(function() {
          'DEVELOPED BY ANGE TUTEUR';
          'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
          'ORIGIN : http://fmdesign.forumotion.com/t1118-live-search#26404';
     
          window.fa_ajax_search = {
            input_fields : 'input[name="search_keywords"]', // input elements you want to enable ajax searching on
     
            delay : 100, // delay before sending search
     
            // language settings
            lang : {
              title : 'Résultats de la recherche',
              searching : 'recherche des sujets contenant "{KEYWORDS}"...',
              no_results : 'aucun résultat pour "{KEYWORDS}"',
              view_all : 'lister les résultats sur une page',
              close : 'fermer'
            },
     
     
            // wait before sending the search
            queue : function (caller) {
              fa_ajax_search.clear(); // clear ongoing searches
     
              fa_ajax_search.wait = window.setTimeout(function() {
                fa_ajax_search.query(caller);
              }, fa_ajax_search.delay);
            },
     
     
            // create the search result popup
            createPopup : function (caller) {
              if (!fa_ajax_search.popup) {
                var popup = document.createElement('DIV');
     
                popup.className = 'fa_ajax_search-results';
                popup.innerHTML =
                  '<a href="javascript:fa_ajax_search.clear();" class="fa_ajax_search-close" title="' + fa_ajax_search.lang.close + '">X</a>'+
                  '<div class="fa_ajax_search-title">' + fa_ajax_search.lang.title + '</div>'+
                  '<ul class="fa_ajax_search-topics"></ul>'+
                  '<p style="text-align:center;">'+
                    '<a href="#" class="button1">' + fa_ajax_search.lang.view_all + '</a>'+
                  '</p>';
     
                fa_ajax_search.popup = popup;
              }
     
              fa_ajax_search.popup.getElementsByTagName('UL')[0].innerHTML = '<li>' + fa_ajax_search.lang.searching.replace('{KEYWORDS}', caller.value) + '</li>';
              fa_ajax_search.popup.lastChild.getElementsByTagName('A')[0].href = fa_ajax_search.url(caller);
              caller.parentNode.appendChild(fa_ajax_search.popup);
            },
     
     
            // submit a search
            query : function (caller) {
              fa_ajax_search.createPopup(caller);
     
              fa_ajax_search.request = $.get(fa_ajax_search.url(caller), function(d) {
                fa_ajax_search.showResults(caller, $('.topictitle', d));
              });
            },
     
     
            // create and return the search URL
            url : function (caller) {
              var form = $(caller).closest('form')[0],
                  where = form ? form.search_where : null;
     
              return '/search?search_keywords=' + encodeURIComponent(caller.value) + '*' + ( where ? '&search_where=' + where.value : '' );
            },
     
     
            // show the results in the popup
            showResults : function (caller, results) {
              var i = 0,
                  j = results.length,
                  list = fa_ajax_search.popup.getElementsByTagName('UL')[0],
                  frag = document.createDocumentFragment(),
                  li;
     
              if (j) {
                for (; i < j; i++) {
                  li = document.createElement('LI');
     
                  results[i].href = results[i].href.replace(/%2A$/, '');
     
                  li.appendChild(results[i]);
                  frag.appendChild(li);
                }
     
                list.innerHTML = '';
                list.appendChild(frag);
              } else {
                list.innerHTML = '<li>' + fa_ajax_search.lang.no_results.replace('{KEYWORDS}', caller.value) + '</li>';
              }
            },
     
     
            // initialize the selected input(s)
            init : function (node) {
              $(node).keyup(function() {
                if (this.value.length >= 3) {
                  fa_ajax_search.queue(this);
                } else {
                  fa_ajax_search.clear();
                }
              }).attr('autocomplete', 'off');
            },
     
     
            // clear and abort ongoing searches
            clear : function () {
              if (fa_ajax_search.wait) {
                window.clearTimeout(fa_ajax_search.wait);
                delete fa_ajax_search.wait;
              }
     
              if (fa_ajax_search.request) {
                fa_ajax_search.request.abort();
                delete fa_ajax_search.request;
              }
     
              if (fa_ajax_search.popup && fa_ajax_search.popup.parentNode) {
                fa_ajax_search.popup.parentNode.removeChild(fa_ajax_search.popup);
              }
            }
          };
     
     
          // search result styles
          $('head').append(
            '<style type="text/css">'+
              '.fa_ajax_search-results {'+
                'font-family:arial, verdana, sans-serif;'+
                'font-size:12px;'+
                'text-align:left;'+
                'white-space:normal;'+
                'background:#FFF;'+
                'border:1px solid #CCC;'+
                'box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);'+
                'margin-top:3px;'+
                'position:absolute;'+
                'z-index:1;'+
              '}'+
     
              '.fa_ajax_search-title {'+
                'color:#FFF;'+
                'background:#69C;'+
                'font-size:16px;'+
                'height:25px;'+
                'line-height:25px;'+
                'margin:-1px -1px 0 -1px;'+
                'padding:0 40px 0 6px;'+
              '}'+
     
              '.fa_ajax_search-results a.fa_ajax_search-close {'+
                'color:#FFF !important;'+
                'background:none;'+
                'display:block;'+
                'position:absolute;'+
                'top:-1px;'+
                'right:-1px;'+
                'text-align:center;'+
                'text-decoration:none !important;'+
                'font-size:18px;'+
                'line-height:25px;'+
                'height:25px;'+
                'width:35px;'+
                'margin:0 !important;'+
                'padding:0 !important;'+
              '}'+
     
              '.fa_ajax_search-results a.fa_ajax_search-close:hover { background:#F33 !important; }'+
     
              '.fa_ajax_search-results > p { padding:3px; }'+
     
              '.fa_ajax_search-topics {'+
                'width:100%;'+
                'max-height:300px;'+
                'overflow-y:auto;'+
                'overflow-x:hidden;'+
              '}'+
     
              '.fa_ajax_search-topics {'+
                'color:#333;'+
                'border-top:1px solid #CCC;'+
                'border-bottom:1px solid #CCC;'+
                'padding:0 !important;'+
              '}'+
     
              '.fa_ajax_search-topics li {'+
                'padding:3px;'+
                'display:block !important;'+
                'line-height:14px !important;'+
              '}'+
     
              '.fa_ajax_search-topics li:nth-child(even) { background:rgba(0, 0, 0, 0.05); }'+
              '.fa_ajax_search-topics li:nth-child(odd) { background:rgba(0, 0, 0, 0.1); }'+
              '#fa_toolbar .fa_ajax_search-topics a { color:#00487D; }'+
              '.fa_ajax_search-topics a.topictitle, #ipbwrapper .fa_ajax_search-results > p > a {'+
                'font-size:12px;'+
                'font-weight:normal !important;'+
                'padding:0 !important;'+
                'background:none !important;'+
              '}'+
            '</style>'
          );
     
     
          // wait for the document to be ready before initializing
        $(function() {
          $(function() {
            fa_ajax_search.init(fa_ajax_search.input_fields);
          });
        });
     
        }());

[Neptunia]

Coucou Orpheus,


Pour changer les intitulés il suffit de modifier les lignes 13 à 17 (lignes 3 à 7 dans l'extrait suivant)

Code:

           // language settings
            lang : {
              title : 'Résultats de la recherche',
              searching : 'recherche des sujets contenant "{KEYWORDS}"...',
              no_results : 'aucun résultat pour "{KEYWORDS}"',
              view_all : 'lister les résultats sur une page',
              close : 'fermer'
            },

[orpheus]

Merci pour le tuyau Neptunia, après test, je confirme que ça a bien réglé le premier problème ^^

J'attend quand même de voir si quelqu'un a une solution pour le second problème (celui qui concerne le bouton rechercher), avant de passer le sujet en résolu
Si ça peut aider à ce propos, j'ai constaté le problème sur Chrome et Firefox, et ce, même en étant déconnecté du forum.

[mSyx]

J'arrive vraiment pas à reproduire le problème. Dans le doute, ajoute ce CSS pour voir:

Code:

.fa_ajax_search-results {
    z-index: 99999 !important;
}

[orpheus]

Ah je comprend pas car j'ai tenté sur deux ordinateurs différents et chez moi le problème est bien présent
J'ai essayé d'ajouter ton code, malheureusement, le problème persiste toujours.

Dans le doute, je transmet ce qui est déjà présent dans mon CSS, sait-on jamais si le problème ne viendrait pas de là

Code:

.headerbar {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 185px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
  }

.Description_none{display:none;/**ont efface la description**/}

.statistics-item > strong {
  font-size: inherit;
  line-height: inherit;
  vertical-align: 0;
}



 /*LE BLOC DES RESEAUX SOCIAUX*/
#M14_btn {
    color: #444;
    font-family: sans-serif;
    font-size: 15px;
    font-weight: 700;
    width: 40%;/*on determine la largeur du bloc*/
    margin-left: 10%;/*/*on decale le bloc de 10% de la gauche*/
}
/*LE TEXTE DES RESEAUX SOCIAUX*/
#M14_btn span
{
float: left;
margin-right: 10px;
width:200px;
height: 32px;
line-height: 32px;
}
/*LES BOUTONS DES RESAUX SOCIAUX*/
a.M14_btn
{
background-color:white;/*couleur de fond en relation avec les images*/
border-radius: 3px;
color: #fff !important;
display: inline-block;
font-size: 17px;
height: 32px;
margin: 3px;
padding: 7px;
text-align: center;
width: 32px;
  padding: 4px;/*en relation avec la dimension des images*/
}

[mSyx]

Rien d'anormal dans le CSS.. Dans le doute, tu pourrais essayer de bien me réexpliquer le problème pour être sûr ? :b Notamment comment tu arrives à le reproduire, quel est élément qui le bloque, etc.

[orpheus]

Rien d'anormal dans le CSS.. Dans le doute, tu pourrais essayer de bien me réexpliquer le problème pour être sûr ? :b Notamment comment tu arrives à le reproduire, quel est élément qui le bloque, etc.

Bah, quand tu vas sur le forum, tu reste en haut de celui-ci (sans descendre) et tu cliques sur le bouton rechercher :



Clique sur le bouton rechercher au centre (symbole loupe) et tape "reg" (sans les guillemets ^^)



Tu devrais voir apparaître un espace blanc empêchant la recherche de s'afficher correctement.

Maintenant, si tu descend un peu sur le forum (via la molette de ta souris par exemple), les résultats s'affiche correctement :



En plus comme tu vois sur mes captures, on a l'impression que lorsqu'on ouvre l'onglet de recherche, celui semble apparaître en arrière plan de la publicité.

Voila, j'espère que tu as compris mes explications

J'en profite également pour poser une autre question mais c'est normal que la recherche instantané semble ne pas fonctionner sur les téléphones portables (du moins, sous Android) ?
Je viens de tester à l'instant pour voir si j'arrivais à reproduire mon problème dessus et le fait est que quand je tape "reg" par ex, ça m'affiche qu'il y a aucun résultats pour ma recherche. En revanche, lorsque je force la validation, une nouvelle page s'ouvre bien avec les résultats

[orpheus]

Excusez-moi pour le double post mais c'était juste pour vous signaler qu'en parcourant ce forum anglais, j'ai trouvé la solution à mon problème en insérant comme indiqué dessus :

Code:

.headerbar { overflow:visible; }

Problème : bien que désormais, l'intégralité de la recherche semble apparaître, j'ai toujours des espèces blancs qui séparent chaque résultat (problème valable uniquement si je reste en haut du forum, dès que je descend, tout apparaît normalement sans espacement) :



Si quelqu'un sait ce qui provoque ça ...
De même, pour le problème des résultats qui n'apparaissent pas sur la version mobile, dois-je laisser ce fil ouvert (puisque après tout, il rentre dans le cadre des problèmes de la recherche instantanée) ou en ouvrir un autre ?

Edit :

Après test, toujours selon le script du forum anglais ci-dessus dans ce post, je confirme qu'en utilisant leur script, je n'ai plus de problèmes d'espacement, en revanche, je perd la faculté d'utiliser la recherche instantanée sur la toolbar en haut à gauche.

N'y connaissant strictement rien en matière de javascript, il suffirait juste qu'on me dise comment réintégrer au script anglais la recherche instantanée sur la toolbar et je pense que le problème serait résolu.

[mSyx]

Re o/

Après test, toujours selon le script du forum anglais ci-dessus dans ce post, je confirme qu'en utilisant leur script, je n'ai plus de problèmes d'espacement, en revanche, je perd la faculté d'utiliser la recherche instantanée sur la toolbar en haut à gauche.

N'y connaissant strictement rien en matière de javascript, il suffirait juste qu'on me dise comment réintégrer au script anglais la recherche instantanée sur la toolbar et je pense que le problème serait résolu.

Je n'ai pas ce problème de mon côté:


Je remarque juste que cet outil de recherche disparaît de la Toolbar dès que la largeur du site (par rapport à ce que le navigateur affiche) est inférieure à 1000px. On peut l'empêcher, mais il faudrait tout de même le cacher si la largeur de la fenêtre est inférieure à 620px; sans quoi, la recherche viendra copuler avec le header. Du coup, ça donnerait:

Code:

#fa_toolbar #fa_search {
display: inline-block !important; }

@media screen and (max-width: 620px) {
  #fa_toolbar #fa_search {
  display: none !important; }
}

De même, pour le problème des résultats qui n'apparaissent pas sur la version mobile, dois-je laisser ce fil ouvert (puisque après tout, il rentre dans le cadre des problèmes de la recherche instantanée) ou en ouvrir un autre ?

Pour être honnête: étant le seul à avoir suivi ce sujet et n'y connaissant pas grand chose en versions mobiles (même si je pencherais vers un problème de compatibilité entre le script et le mobile), je te conseillerais d'ouvrir un nouveau sujet; plutôt dans la section Problème avec un script, code par contre; tu auras peut-être plus de chance d'avoir l'aide de personnes mieux qualifiées dans ce domaine précis :b

[orpheus]

Re o/

Après test, toujours selon le script du forum anglais ci-dessus dans ce post, je confirme qu'en utilisant leur script, je n'ai plus de problèmes d'espacement, en revanche, je perd la faculté d'utiliser la recherche instantanée sur la toolbar en haut à gauche.

N'y connaissant strictement rien en matière de javascript, il suffirait juste qu'on me dise comment réintégrer au script anglais la recherche instantanée sur la toolbar et je pense que le problème serait résolu.

Je n'ai pas ce problème de mon côté:

C'est normal, j'oubliais de préciser que lorsque j'ai constaté que la recherche instantanée ne fonctionnait pas avec cette méthode, j'ai remis mon ancien script, avec les bugs que ça comporte (cf, espacement blanc lorsque je recherche avec la loupe).

[mSyx]

Pour enlever ces espaces blancs:

Code:

ul.fa_ajax_search-topics li {
    margin: 0 !important;
}

[orpheus]

Ah ben cette fois, tout passe nickel ! ^^
Merci à vous deux Kehoru et Neptunia, je passe le sujet en résolu.
Je vais en ouvrir un autre pour le problème sur les mobiles.

[mSyx]

Au plaisir (: J'espère qu'on pourra t'aider pour le problème lié à la version mobile; navré de ne pas pouvoir de mon côté