// filterlists.js
//
// In every <ol> of the document, hides list items that don't match the criteria
// in the remaining lines, highlight the matches
//
// To use, add
// <input onkeyup = "filter(this.value)" /> in the document's body
// <script type="text/javascript" src="filterlists.js"></script> in the document's head
// span.highlighted {background-color: #00FFFF} in the document's css
//
// Copyleft GPL v3, Minh Ha-Duong, CIRED, 2008.
function filter(criteria) {
categories = document.getElementsByTagName("ol")
for (j=0; j<categories.length; j++) {
filterList(criteria, categories[j])
}
}
function filterList(searchString, textContainerNode) {
var tempinnerHTML = textContainerNode.innerHTML
// Unlight all
var regex = new RegExp('<span class="highlighted">([^>]*)?</span>',"ig")
tempinnerHTML = tempinnerHTML.replace(regex,'$1')
// Highlight matching spans
regex = new RegExp(">([^<]*)?("+searchString+")([^>]*)?<","ig")
textContainerNode.innerHTML = tempinnerHTML.replace(regex,'>$1<span class="highlighted">$2</span>$3<');
// Hide nonmatching list items
regexp = new RegExp(searchString,"i")
var allitems = textContainerNode.getElementsByTagName("li")
for (i=0 ; i<allitems.length; i++) {
rawtext = allitems[i].innerHTML.replace(/<[^>]*>/g,"").replace(/\(Abstract\)/,"")
allitems[i].style.display = (rawtext.match(regexp) ? 'block' : 'none')
}
}
samedi 3 mai 2008
My first javascript: a list filter
My list of publications is getting too long to browse conveniently. I wrote this client-side script to filter by substring matches.
Inscription à :
Publier les commentaires (Atom)
Aucun commentaire:
Enregistrer un commentaire