Menu de recherche instantanée

Hi,
Ce plugin permet aux barres de recherches de rechercher automatiquement les sujets en cours de frappe. Les recherches sont effectuées avec le caractère générique (*) pour vous assurer d'obtenir des résultats sans avoir à taper le mot entier.
Le plugin est optimisé pour fonctionner sur n’importe quel formulaire de recherche du forum.
Installez simplement le plugin et tous les champs de recherche afficheront les résultats au fur et à mesure que vous tapez !

Afficher le résultat:

Astuce développée par Ange Tuteur pour le forum anglais, mis à jour par Neptunia pour le FDF

Direction le javascript

Panneau d'administration / Modules / HTML & JAVASCRIPT / Gestion des codes javascript



Mettre ce script sur toutes les pages :

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);
          });
        });
      
        }());

Pensez à  

:u1:

À bientôt

---