Rapid development documents and Ajax style skills search

The SkillClouds Rapid development cycle page has now been updated with documentation on our wireframes, screen shots, videos and working prototypes of the functionality for the project.

As the first of a few blog posts we are going to tell you a little bit about how we coded some of the functionality the users requested, starting with searching the tag cloud.

During the SkillClouds pilot stage there was a desire by users to use a search box rather than scanning through a list of tags.

The approach :
SkillCloud displays all the user's skills on the page already, so rather than any database search of the user's skills we implemented a DOM search.

Now you see it, now you don't :
The Blacktree application Quicksilver uses a display mechanism in searching for files in your pc folders. It 'hides' those files which do not match the search criteria you enter.

Now you see it, now you see it 'more' :
Applying this with javascript to an xhtml DOM we can pattern match to a list of items and apply some dynamic 'hightlight' css class to those which match the user's search criteria, giving them emphasis. The code below shows the dynamic javascript css style 'highlight' applied to the tags which match the search for the consecutive letters PR in any tag.



Screenshot 'in-action':
The highlighted tags match the text in the search box in a greedy fashion - here the search is for any tags that contain the letters AN, with the corresponding tags highlighted and enlarged.




As you type more letters, the search is narrowed and a more precise match is shown. Here the search term ANALYSIS shows only those tags containing the the term.





Try it yourself :
Our greedy pattern matching skillclouds search prototype.


Footnote :
Since our implementation Jquery main man John Resig has designed an efficient way of the 'now you see it now you don't' DOM searching called jquery-livesearch which we will be looking at in comparison to our implementation and using if it's more efficient.