Experiment Searching with Autocomplete Functionality on Blogspot using typeahead.js

---

This post isn't meant to be tutorial. It just give you vision that we can implement this feature on static blogspot template. This feature is already implemented on dynamic blogspot template and truthfully this post is also taken inspiration from the autocomplete search from dynamic blogspot template.

So what searching with autocomplete functionality stands for? AFAIK, it's a feature when you type something in the search box, it will provide you auto suggestions that relevance with whatever you type in it. It will provide immediate result without need to click the submit button and redirected to the result page (If you want more clear explanation just try to search something on blog that use dynamic template).

In this post I try to experiment this feature on blog using autocomplete jQuery library made by twitter called typeahead.js.

So to try this feature, I have made following steps:

Batch Script to Download Zip File and Unzip it Automatically via Commad Prompt

Sometimes I realize when I download archive file like zip, it pains me to unzip it manually by mouse. So I decided to create a shell script (in windows is batch script) that can perform download of the zip file and instantly unzip and delete zip file from command prompt. It needs curl and unzip library to have installed to your system.

---

@echo off

curl -sS %1 > temporary.zip && unzip temporary.zip && rm temporary.zip

---

I saved it as fetchzip.bat

So whenever i wanna download zip file i called this in command prompt

---

fetchzip http://the/url/of/the/file.zip

---

It'll fetch the zip file to the current directory, rename it to "temporary.zip", extract the content using unzip, and delete the zip file.

To make the batch script can be called anywhere. Don't forget to add the batch script to environment variable like explained in this article.

Javascript Unique Syntax

This post is only means for my references, but maybe useful for you

1. Boolean Shorthand Replacement

---

// Normal
true, false

// Shorthand
!0, !1

// Because true === !0, false === !1

2. Convert to Number

---

var a = "1";

// Normal
new Number( a );

// Shorthand
+a;

// Result 1

3. Convert to fixed Number

---

var a = 3.5;

// Normal :
parseInt( a, 10 );

// Shorthand
~~a;

// Result 3

SVN commit does nothing

I run this problem when I tried to commit new folder with some files in my google code repository. I use svn command line from CollabNet Subversion in my windows OS. I accidently found a solution with running a command:

svn commit -m ''

By using commit with empty message has solved my problem :)

It seems the correct one is to use "" (double quotes) when commit something like

svn commit -m "fixed bugs"

Implement Inifinite Scroll to your Blogspot

Many websites, use pagination to limit result of displayed data on the page. The data can contain articles, content, product category, records in the table, search result, and etc. This is some example what pagination looks like:

---

---

You almost found it everytime when you search using google. But these days, many websites prefer using infinite scroll. Twitter, facebook, youtube, and many more already use it. And the new dynamic Blogger template also has already implemented this technique. The basic functionality of infinite scroll is when user scroll through content and more content will be loaded automatically using AJAX.

---

The different layout between pagination and infinite scroll (taken from smashingmagazine.com)

---

But can infinite scroll implemented in static Blogger template? Yes it can, by using this jQuery plugin called infinite-ajax-scroll created by Webcreate. It's very cool, because its options can adapt with blogspot layout, and worked really well with blogspot. The plugin also use History API to camouflage the url and handling the back button.

Here's the sample demo