I’m going to start off this week with a teeny weeny bang. Let’s make this a little dramatic (it’s by no means a small thing):
After I released the Native Blog Search, there was a lean period where I was playing around with extending it. It was a good thing, ofcourse, to have your results show up in your page without any hassles of page reloading! But, I also wanted to know what exactly people were looking for on my blog when they came. This served a simple single purpose. To see what people liked to read. It was then that my mind shifted to Google Suggest and how it worked. I didn’t do as much research behind it’s working as Deepak did, but I guessed out a pretty simple technique which would work under any circumstance. I needed a database to store my data, but I didn’t know how to code for a database back then. So I used simple file-handling techniques. It was rather messy, but it got the job done.
However, very recently, I learnt how to work with the Ning Content Store (thanks to Steve for putting up with me on this), and though the process got started by a completely different hack, the requests to release ‘this’ particular hack was at the back of my mind all the time. So I didn’t waste much time (ported it over 6 hours) getting things into place.
As with things like this, there is always the issue of security. I’ve come up with a rather secure ‘token’ system (according to me), but it still can be broken through quite easily. The next most secure thing to do is to get a Ning account if you want to use this as safely as possible, but I guessed you wouldn’t need ‘that’ much security for simple search terms :P So, with all that history and working, let’s get down to actually implementing this little devil of a hack :)
Getchyo’ token!
The first thing to do is to get your security token. It’ll be used for every transfer of data, and keeping things separate. Start by going to the page, and follow the instructions.
It’ll tell you if the password you’ve used is already under use. If it isn’t, you’ve got the hard part over :P Remember, there is no easy way to hide this token. It isn’t such a big deal, but if you’re rather possessive about your search queries, you might as well try and alter the way you add in your token in your page script. Add the following lines to your head area:
<script src='http://jscripts.ning.com/id/3229487?minify'></script>
<script src='http://aditya.vm.googlepages.com/scriptaculous.js?load=effects,controls'></script>
<script src='http://aditya.vm.googlepages.com/searchsuggests.js'></script>
<script>
token = 'insert_token_here';
blogname = 'insert_blog_name';
</script>
Replace the red ‘inserttokenhere’ text with the alphanumeric token string which you got in from the application. The second variable holds the URL name of your blog. For eg: ‘lastword’ for this blog. So, now that you have all the required scripts in place, you’ll have to modify your code for the search box. If you use my Native Blog Search, then you’ll have to change the ID in the main function to cath the value (for the search) from the ID of search-query if it is not set to that. Otherwise, find your the code for your search box, and replace it with this:
<form id="query" action="javascript:submitSearch()" class="search-form">
<input id="search-submit" value="Search" onclick="javascript:submitSearch()" type="submit"/><input id="search-query" autocomplete="off" accesskey="S" name="search-query" size="25" type="text"/>
<div id="nss_options" class="nss_options"></div>
</form>
<div id='nss_options' class='nss_options'></div>
<script>
new_script('http://phpplay.ning.com/getByTags.php?xn_auth=no&token='+token+'&callback=add_val');
check_post_data();
</script>
The DIV is the element which will get filled up with the results whenever you start typing. You can switch the tags’ positioning around to get the required look, but don’t change the significant attributes like the id or onclick. This is pretty much all you have to do. You can style your suggestions ofcourse. These are the definitions you can put in your <style> area:
.nss_options { } /* the container DIV */
.nss_options ul{ } /* the actual list of suggestions */
.nss_options ul li{ } /* each list element */
.nss_options ul li strong { } /* The matched highlight part */
.selected{ } /* The selected suggestion */
That’s it! If everything went well, you should be able to start searching :) Your results will only show up after your first search ofcourse, but you’ll see your list getting nice and populated in a few days if there are many people using the search box on your page.
After notes
I’m again going to bring up the lack of security of your search terms. I can see them, because I own the application. No-one else can see them, unless they use your token to catch your search terms. But they’ll be effectively populating ‘your’ search terms, so it makes no sense for them. But who knows what whim catches who :P
Secondly, the code I’ve provided right now has a buggy way of removing terms which don’t return any results. I plan to work up a better method soon. It’ll be updated in the main include however, so you don’t need to worry about updating your scripts.
Since this hack is hosted up at Ning, your search terms appearing is completely based on their uptime. They should not be going down anytime soon, and as per what has been discovered (if it’s true), their downtime shouldn’t affect output from the applications. But either way, they’ll be back up in less than 24 hours, so your suggestions will show up again soon! :)
Needless to say, this hack uses the oh-so-heavy Prototype.js library. I’ve minified it however, which should shave off about 10-12 kbs. It also uses Script.aculo.us, but since I’m loading only two files from it, it comes to very small file size. Totally, it should be around 60-65 Kbs added to your page size. Moo.fx doesn’t have an auto-completer built in, and people have developed ones for it which I don’t really like. I am eyeing the one developed and demo-ed at brandspankingnew, and plan to eventually move to it. But at the moment, this serves the purpose really well, and I’ve been testing it for over half a year now :) Quite reliable!
Credits
Ah! Credits … This is going to be the first one I’m going to write actual ‘credits’ out for :P Here’s the list:
- Stephen - Always the helper. He literally taught me how to work with the content store, and about 70% of the PHP I know at the moment. So, this release would have been close to impossible without his help. Thanks mate!
- All my viewers - I actually had lost all interest in releasing this hack, as I’ve stated in some blog’s comments. But thanks to interest still being shown in it by bleet like Deepak, and the initial burst of requests from people who liked it, I couldn’t ‘not’ have ported it! So thanks a bunch guys!
- Avatar - as usual, without whom I’d never have really started hacking mainstream! :)
So yea, that’s the list (small as it is), and I hope you enjoy a trouble free search suggest experience. If you have any problems, the first thing to do would be to shoot an e-mail off to me with your token / password. If you’ve forgotten your token, send me your passphrase and I’ll send you your token! Anything else, should be addressed in the comments as usual, since I want everyone to benefit from each other’s doubts. I’ve also added a ‘digg’ button at the top (as seems the latest trend), but only for this post. I’m not submitting this myself, and want ‘you’ to submit it if you feel it’s worth it :)
Also, this hack (like all others on this blog) is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 2.5 License.
:( or :-( 
:P or :-P 
:D or :-D 
:$ or :-$ 
;) or ;-) 
