Highlight Search Terms

[Chris]

Update:
Looks like searches within a single thread doesn't bother using the search template so this might actually be better as a plugin...

At the bottom of the Post Results tab of your forum's search page template add the following code which I decided would do better as a template mod rather than a plugin

code:

<script type="text/javascript">
$(function () {
	var d
	if (window.listMan && listMan.effectiveType == "posts"
		 && (d = $('input.ui-autosearch', listMan.search).data('autosearch').data)
		 && (d.q || d.what_at_least_one || d.what_exact_phrase || d.what_all)) {
		var posts = $('.item.post .message'),
		searchTerm = d.what_exact_phrase ? RegExp(d.what_exact_phrase.replace(/\+/g, " "), "gi")
			 : (d.what_at_least_one || d.q ? RegExp("(" + (d.what_at_least_one || d.q).replace(/\+/g, " ").split(/\s/).join("|") + ")", "gi") : RegExp("(" + d.what_all.replace(/\+/g, " ").split(/\s/).join("|") + ")", "gi")),
		foundTermsID = [];
		foundTermsID.push("searchterm_" + foundTermsID.length),
		ctrlbarH = ($('.control-bar').height() + 20);
		posts.each(function (i, e) {
			var tnodes = $(e).contents()
				.filter(function (index) {
					return this.nodeType == 3
				}).get()
				$(e).find('*').each(function (yi, ye) {
					tnodes = tnodes.concat($(ye).contents().filter(function (index) {
								return this.nodeType == 3
							}).get());
				})
				$($.unique(tnodes)).each(function (ti, te) {
					if (searchTerm.test(te.data) && !$(te).parent().hasClass("highlight")) {
						foundTermsID.push("searchterm_" + (+new Date));
						$(te).replaceWith(function(){var td=proboards.escape_html(te.data).replace(searchTerm, function (m) {
								return '<span class="' + foundTermsID[foundTermsID.length - 2] + ' warning-medium search-term highlight" style="cursor:pointer;" onclick="var pos = $(\'.' + foundTermsID[foundTermsID.length - 1] + '\').offset();if(pos){pos.top-=' + ctrlbarH + '; $(window).scrollTo(pos);return false;}" title="click for next search term">' + m + '</span>'
							});
					}
				})
		})
		$('a[href] .search-term.highlight').removeAttr('onclick').attr('title', 'this is a link!')
		//scroll first search term into view
		//var pos = $('.search-term.highlight').first().offset();
		//if(pos){ pos.top -= $('.control-bar').height(); $.scrollTo(pos);}
		proboards.one("pageChange", arguments.callee)
	}
})

</script>

this will highlight the search terms you entered and allow you to click on each highlighted term to automatically scroll to the next highlighted term.



By default the terms inherit the colors from the warning-medium class but also has the classes search-term and highlight if you wish to override that default color or spice it up a bit with other CSS properties.

Update: Looks like searches within a single thread doesn't bother using the search template so this might actually be better as a plugin...

Updates:

• added proboards.escape_html method
• Added the new pagination event hook