Live Search

Installation

Code:

(function() {
  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 : 'Search Results',
      searching : 'Searcing topics for "{KEYWORDS}"...',
      no_results : 'No results were found for "{KEYWORDS}"',
      view_all : 'View in search page',
      close : 'Close'
    },
 
 
    // 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;'+
        'margin:0 !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_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() {
    fa_ajax_search.init(fa_ajax_search.input_fields);
  });
 
}());

Click to view modifications:

Code:

.headerbar {
  overflow:visible;
}