itspriddle/_layouts_default.html

## _layouts_default.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  <script src="/js/autocomplete.js" type="text/javascript"></script>
  <title>Testing your mom - nevercraft.net</title>
  <script type="text/javascript" charset="utf-8">
    jQuery(document).ready(function($) {
      $('input#searchfield').autocomplete('/js/posts.json');
    });
  </script>
  <style type="text/css" media="screen">
    ul.autocomplete
    {
        position: absolute;
        overflow: hidden;
        background-color: #fff;
        border: 1px solid ButtonShadow;
        margin: 0px;
        padding: 0px;
        list-style: none;
        color: #000;
    	z-index:1000;
    }
    ul.autocomplete li
    {
      display: block!important;
      padding: 6px !important;
      overflow: hidden;
      width: 100%;
      cursor:pointer;
    }

    ul.autocomplete li.selected
    {
      background-color: Highlight ;
      color: #fff;
    }
  </style>
</head>
<body>

<div id="content">
  Hi!
</div>

<div id="sidebar">
  <div id="search-posts">
  <h2>Search</h2>
  <input type="search" results="5" placeholder="Search&hellip;" id="searchfield" size="30" />
</div>


</body>
</html>

## js_autocomplete.js
;(function ($) {
  $.fn.extend({
    autocomplete: function(url)
    {
      return this.each(function()
      {
        var text_input  = $(this);
        var search_res  = text_input.after('<ul class="autocomplete" style="display:none;"></ul>') && text_input.next('ul.autocomplete');
        var search_size = 0;
        var selected    = -1;
        var last_search = '';
        var observer;
        function search_payload(search_text)
        {
          if ( ! search_text)
          {
            search_text = text_input.val();
          }
          window.clearTimeout(observer);
          if (search_text && search_text != last_search)
          {
            last_search = search_text;
            $.getJSON(url, function (posts) {
              if (posts)
              {
                var output = '';
                $.each(posts, function(index, post) {
                  var title = post.title;
                  var pdate = post.date;
                  //alert(post.url);
                  var check = new RegExp("(" + search_text + ")", "i");
                  if (title.match(check))
                  {
                    search_size = search_size + 1;
                    output += '<li href="' + post.url + '">' + pdate + ' - ' + title.replace(check, "<strong>$1</strong>") + '</li>';
                  }
                });
                if (output == '')
                {
                  output = "<li>No results</li>";
                  search_res.html(output);
                  search_res.show();
                }
                else
                {
                  search_res.html(output);
                  search_res.show().children().
                  hover(function() {
                    $(this).addClass('selected').siblings().removeClass('selected');
                  }, function() {
                    $(this).removeClass("selected");
                  }).
                  click(function() {
                    window.location = $(this).attr('href');
                  });
                }
              }
            });
          }
          else
          {
            search_res.children().remove();
            search_res.hide();
          }
        }

        function clear_search()
        {
          search_res.hide();
          search_size = 0;
          selected = -1;
        }

        text_input.keydown(function(e) {
          window.clearTimeout(observer);
          switch (e.which)
          {
            // Escape button
            case 27:
              clear_search();
              break;

            // Delete and backspace
            case 46:
            case  8:
              clear_search();
              break;

            // Enter
            case 13:
              if (search_res.css('display') == 'none')
              {
                search_payload();
              }
              else if (search_res.children('li[href]').length > 0)
              {
                window.location = search_res.children('li.selected').eq(0).attr('href');
              }
              else
              {
                clear_search();
              }
              e.preventDefault();
              return false;
              break;

            // up/down
            case 40: // down
            case 38: // up
              if (e.which == 40)
              {
                selected = selected >= search_size - 1 ? 0 : selected + 1;
              }
              else if (e.which == 38)
              {
                selected = selected <= 0 ? search_size - 1 : selected - 1;
              }
              search_res.children().eq(selected).addClass('selected').siblings().removeClass('selected');
              break;

            default:
              observer = window.setTimeout(function() { search_payload(); }, 1000);
              break;
          }
        });
      });
    }
  });
})(jQuery);

## js_posts.json
---
layout: nil
---
[{% for post in site.posts %}
  {"date": "{{ post.date | date: "%Y-%m-%d" }}", "title": "{{ post.title }}", "url": "{{ post.url }}"}{% unless forloop.last %},{% endunless %}{% endfor %}
]
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
	<script src="/js/autocomplete.js" type="text/javascript"></script>
	<title>Testing your mom - nevercraft.net</title>
	<script type="text/javascript" charset="utf-8">
	jQuery(document).ready(function($) {
	$('input#searchfield').autocomplete('/js/posts.json');
	});
	</script>
	<style type="text/css" media="screen">
	ul.autocomplete
	{
	position: absolute;
	overflow: hidden;
	background-color: #fff;
	border: 1px solid ButtonShadow;
	margin: 0px;
	padding: 0px;
	list-style: none;
	color: #000;
	z-index:1000;
	}
	ul.autocomplete li
	{
	display: block!important;
	padding: 6px !important;
	overflow: hidden;
	width: 100%;
	cursor:pointer;
	}

	ul.autocomplete li.selected
	{
	background-color: Highlight ;
	color: #fff;
	}
	</style>
	</head>
	<body>

	<div id="content">
	Hi!
	</div>

	<div id="sidebar">
	<div id="search-posts">
	<h2>Search</h2>
	<input type="search" results="5" placeholder="Search…" id="searchfield" size="30" />
	</div>


	</body>
	</html>
	;(function ($) {
	$.fn.extend({
	autocomplete: function(url)
	{
	return this.each(function()
	{
	var text_input = $(this);
	var search_res = text_input.after('<ul class="autocomplete" style="display:none;"></ul>') && text_input.next('ul.autocomplete');
	var search_size = 0;
	var selected = -1;
	var last_search = '';
	var observer;
	function search_payload(search_text)
	{
	if ( ! search_text)
	{
	search_text = text_input.val();
	}
	window.clearTimeout(observer);
	if (search_text && search_text != last_search)
	{
	last_search = search_text;
	$.getJSON(url, function (posts) {
	if (posts)
	{
	var output = '';
	$.each(posts, function(index, post) {
	var title = post.title;
	var pdate = post.date;
	//alert(post.url);
	var check = new RegExp("(" + search_text + ")", "i");
	if (title.match(check))
	{
	search_size = search_size + 1;
	output += '<li href="' + post.url + '">' + pdate + ' - ' + title.replace(check, "<strong>$1</strong>") + '</li>';
	}
	});
	if (output == '')
	{
	output = "<li>No results</li>";
	search_res.html(output);
	search_res.show();
	}
	else
	{
	search_res.html(output);
	search_res.show().children().
	hover(function() {
	$(this).addClass('selected').siblings().removeClass('selected');
	}, function() {
	$(this).removeClass("selected");
	}).
	click(function() {
	window.location = $(this).attr('href');
	});
	}
	}
	});
	}
	else
	{
	search_res.children().remove();
	search_res.hide();
	}
	}

	function clear_search()
	{
	search_res.hide();
	search_size = 0;
	selected = -1;
	}

	text_input.keydown(function(e) {
	window.clearTimeout(observer);
	switch (e.which)
	{
	// Escape button
	case 27:
	clear_search();
	break;

	// Delete and backspace
	case 46:
	case 8:
	clear_search();
	break;

	// Enter
	case 13:
	if (search_res.css('display') == 'none')
	{
	search_payload();
	}
	else if (search_res.children('li[href]').length > 0)
	{
	window.location = search_res.children('li.selected').eq(0).attr('href');
	}
	else
	{
	clear_search();
	}
	e.preventDefault();
	return false;
	break;

	// up/down
	case 40: // down
	case 38: // up
	if (e.which == 40)
	{
	selected = selected >= search_size - 1 ? 0 : selected + 1;
	}
	else if (e.which == 38)
	{
	selected = selected <= 0 ? search_size - 1 : selected - 1;
	}
	search_res.children().eq(selected).addClass('selected').siblings().removeClass('selected');
	break;

	default:
	observer = window.setTimeout(function() { search_payload(); }, 1000);
	break;
	}
	});
	});
	}
	});
	})(jQuery);
	---
	layout: nil
	---
	[{% for post in site.posts %}
	{"date": "{{ post.date \| date: "%Y-%m-%d" }}", "title": "{{ post.title }}", "url": "{{ post.url }}"}{% unless forloop.last %},{% endunless %}{% endfor %}
	]