Links Search - Interactive Sitemaps

Sitemaps generally tend to be a boring collection of links - useful - but boring. When I was working on the Sitemap for OpenJS, I wanted to make it more user friendly. As a result, I created the sitemap filter function. This function takes a few keywords from the user and searches the DOM structure for link texts matching the search term(s). If the search term is not found in a link, that links will be hidden from view. The result is a very cool searching script.

See Demo

Working

This script creates a very Ajax-like effect without using Ajax. And it is very useful if the user is trying to use the sitemap to find a specific page in your site.

My sitemaps are in a list format - nested unordered list, if you like. Each node has a link to a page. The search will be for this links text - ie. the anchor text - or the text inside the <a> tag. If the text is found, nothing is done. If the text is not found, the parent node - the <li> just above this link will be hidden(display:none). This is done live - this function will be called everytime you press any button in the search field. The effect will be a disappearing sitemap. For example, you are searching for a tutorial on ajax. You go to the sitemap page and type Ajax in the filter field. Now only pages with the word Ajax in their title will be there in the sitemap. Lets break the process up...

You open up the sitemap page and type 'a' in the search field. Now all the links without the letter 'a' will be hidden. You may not notice much change because almost all links have the 'a' charector in it. Then you press 'j' - this is where the change becomes apparent. This will hide all the pages in which 'a' and 'j' are not found in the title - so most of the pages will be hidden - with the exception of pages with title which has words like 'major', 'ajar' and, of course, 'ajax'. By the time you type 'ajax', only the pages about Ajax will be shown in the sitemap.

Code

The code is available in GPL(I call this site 'Open' JS for a reason). I have created the code as a Object Literal - so it should work with other scripts - unless you want to name a variable 'links_search'.

View source - JS file

Using

For this script to work, your sitemap must be in the same format as mine - as a nested li,ul list. The rootl <UL> element must have the id 'sitemap'.

<ul id="sitemap">...

You should also create a input field with id 'search'. This field will be used by the user to input search strings.

<input type="text" id="search" name="search" value="" />

Include the given JS file in the page...

<script src="links_search.js" type="text/javascript"></script>

The last step - call the initialization funtion of this library at onload.

window.onload = function() {
	document.getElementById("search").focus();
	links_search.init();
}

I have included this part in the JS file - but that is not a recommended method as if you have any function to be executed at load, only one of these two functions will be called. It would be better if you remove these lines and insert it into your own init() function - if you have one.

If you decide to use this script, let me know() and I could link to that file from this page - as sample pages for this script. Or just leave a comment here.

blog comments powered by Disqus