Low Search Live

low-search-live.js

/* Requires jQuery */
(function($){

  var LowSearchLive = function(el) {

    var $keywords = $(el),
        $form = $keywords.closest('form'),
        resultPage = $keywords.data('result-page'),
        threshold = $keywords.data('threshold') || 4,
        wait = $keywords.data('wait') || 750,
        cache = {},
        terms, t1;

    // Make sure the autocomplete is off
    $keywords.attr('autocomplete', 'off');

    // Create target div for search results
    var $target = $('<div/>').addClass('low-search-live').css({
      position: 'absolute',
      boxSizing: 'border-box'
    }).appendTo('body').hide();

    // Check search terms on keyup
    $keywords.on('keyup', function(event){
      terms = $keywords.val().replace(/\s+$/, '');
      if (t1) clearTimeout(t1);
      if (terms.length >= threshold) t1 = setTimeout(fire, wait);
    });

    // Prevent submission on enter
    $keywords.on('keydown', function(event){
      if (event.keyCode == 13) return false;
    });

    // Show the target
    function showTarget(txt){
      var offset = $keywords.offset();
      $target.css({
        top: offset.top + $keywords.outerHeight() + 1,
        left: offset.left,
        width: $keywords.outerWidth()
      }).html(txt).show();
    };

    // Event fired
    function fire(){

      // If results are in cache, show that
      if (cache[terms]) {
        showTarget(cache[terms]);
        return;
      }

      // Data to send
      var data = $form.serialize()
        + (resultPage ? '&result_page=' + resultPage : '');

      // Disable the input field
      $keywords.prop('disabled', true);

      // And ajax call to back end
      $.ajax({
        method: 'POST',
        url: $form.attr('action'),
        data: data,
        dataType: 'html',
        complete: function(xhr, status) {
          cache[terms] = xhr.responseText;
          showTarget(xhr.responseText);
          $keywords.prop('disabled', false).focus();
        }
      });

    };

  };

  new LowSearchLive(document.getElementById('keywords'));

})(jQuery);

search_index.html

<!-- Use the data-result-page attribute to define the search results template for the live search. -->
{exp:low_search:form}
  <input type="search" name="keywords" id="keywords" data-result-page="search/live-results">
{/exp:low_search:form}

search_live-results.html

{exp:low_search:results
  query="{segment_3}"
  limit="10"
  disable="categories|member_data|channel_fields"
}
  {if count == 1}
    {total_results} of {absolute_results} result{if absolute_results > 1}s{/if}
    {if absolute_results > total_results}
      &mdash; <a href="{low_search:url result_page="search/results"}">view all</a>
    {/if}
    <hr>
    <ul>
  {/if}
  <li><a href="{auto_path}">{title}</a></li>
  {if count == total_results}</ul>{/if}
  {if no_results}Nothing found!{/if}
  {paginate}<!-- -->{/paginate}
{/exp:low_search:results}

styles.css

/* The keywords input field will be disabled when loading. Change styles accordingly. */
#keywords[disabled] {
  background-color:#eee;
}

/* The div generated by JavaScript and positioned below the keywords input field. */
.low-search-live {
  background:#fff;
  box-shadow:1px 1px 3px rgba(0,0,0,0.5);
  padding:10px;
}