Search Highlight Using sm-treeview

By YUI TeamMarch 13, 2013

The following blog post was written by a member of the YUI community. Want to write your own article for the YUI Blog? Find out more on our Contribute page!

I am a long time Delicious user but there are no good Delicious add-ons for my browser of choice, Chrome. So I decided to write my own. I saw a demo of sm-treeview at YUIConf 2012 and decided to use it as a basis for my extension. The layout for my extension's tree is simple. Each tag is a folder and can contain children. Each bookmark is a child. I wanted to be able to search bookmarks. My vision would be for you type what you're searching for in a text box. Matching results would have their parent folders expanded and the actual results highlighted. Unfortunately, sm-treeview does not have a search feature at this time. Using a little trickery I was able to add this functionality to sm-treeview. 1) Create CSS for highlighting the search results.2) Create an object to hold the mapping for each "child".3) Add a closeAll prototype to your code.4) Render your tree with lazyRender disabled so you have access to the entire tree's markup.5) Immediately after rendering your tree, populate the child node map.6) Create a keyup event to track changes to the search box.

I am processing my results in the keydown event. You could create an array of search results, etc. Performance with 80 parents and 400 children is excellent. I am sure there is a more efficient way of doing this but it does work and I have not hit any performance snags.

For an interactive demo of a searchable muppet list using this technique look at this jsbin.

About the author: Gary Danko (@gdanko) Gary Danko is a husband and father, Android developer, and Yahoo! engineer who lives in California.