Bootstrap 3 Template

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<input type="text" id="search">

CSS

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
    margin: 10px;
}*/

JavaScript

$(document).ready(function() {
  // create a json object to hold the callback functions we'll use to render the respone for each search type
  var callbacks = {
    customers: function(response) {
      resultLength = response.length;
      if (resultLength == 0) {
        trHTML = '<tr><td colspan="4">No Results</td></tr>';
      } else {
        $.each(response, function(i, item) {
          if (i > 0) {
            trHTML += '<tr><td>' + item.action + '</td><td>' + item.accountnumber + '</td><td>' + item.company + '</td><td>' + item.phone + '</td><td>' + item.postcode + '</td></tr>';
          }
        });
      }
      $('#customers').html(trHTML);
      $("#customers_counter").html("(" + resultLength + ")");
    },
    contacts: function(response) {
      // render code for contacts ...
    },
    invoices: function(response) {
      // render code for invoices ...
    },
    tickets: function(response) {
      // render code for tickets ...
    }
  }


  var timeout = null;
  $('#search').on('keyup', function() {
    var $this = $(this);
    if (timeout !== null) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(function() {
      var searchTerm = $this.val().toString().trim(); 
      if (searchTerm == '') return; // no input, abandon search
      $.each(callbacks, function(type, callback) {
        doSearch(searchTerm, type, callback);
      });
    }, 1000);
  });
  
});

function doSearch(searchTerm, type, callback) {
  $.ajax({
    type: "POST",
    dataType: "json",
    url: "/section/search_go?type=" + encodeURIComponent(type), // if the whole URL changes, you'll need pass in the URL and not just the type 
    data: {
      query: searchTerm
    },
    cache: false,
    success: function(response) {
      callback(response); // call our callback function and pass it the response
    }
  });

}