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:
1. I include these following libraries at the end of header and body. In this case i will use twitter-bootstrap as my base template, moment.js to manipulate the date, and use jsdelivr as my main cdn service.
2. Create a searching box form using HTML/Javascript Widget in Layout & add class typeahead on the input tag.
3. Next make a script tag with this initialization.
4. Call the typeahead plugin on the search input, with these settings. In this example, I attach typeahead class on the input, so I make a call with .typehead, put these codes below the Config namespace.
5. Add the stylesheet to design the interface. Once again, the codes below are only adjusted for twitter-bootstrap dsign, if you don't want to use twitter-bootstrap design you should to take different approach in styling. For stylesheet, I'm gonna use this css provided by hyspace with some modification
6. Ok, from this point, we completed the autocomplete feature. But there's some notes that we must consider. It's when user clicks a suggestion, it should redirect user to the suggestion url. Or when user select the suggestion and press enter we want to redirect it too. To implement such things we need to add some codes :
7. Finally, add workaround to give user the manual searching page if the suggestion maybe not satisfy the user's preferences
Ok, to sum it up I will give a simple demo below, so go check it out