I wanted to build a search box for Blogspot which goes through every label and filters them so remains just the match and every other label is hidden.
I work with this through the firefox developer tools on my blog.
I know that I have written really ugly code, but I'm still learning.
var html = $('.list-label-widget-content > ul:nth-child(1)').html();
var labels = html.split('\n');
labels = labels.filter(function (label) {
if (label !== '<li>' && label !== '</li>') {
return label;
}
})
var re = '\/label\/(.+)">';
var clear_labels = [];
var label_urls = function () {
for (var i in labels) {
clear_labels.push(labels[i].match(re)[1])
}
}
label_urls(labels)
var searchb = $('#search')
searchb.keyup(function () {
var count = 0,
lbl = 0;
// Go through every label in clear_labels variable.
for (lbl = 0; lbl <= clear_labels.length - 1; lbl++) {
// Compare the value from inside the search box with every label's name
// and with the exact number of character that are typed in the search box.
if (searchb.val() === clear_labels[lbl].substring(0, searchb.val().length)) {
// If it is a match then go through every <li> element on the site
for (count = 0; count <= ($('li').length - 1); count++) {
var litwo = $('li')[count]; // Assign litwo a new <li> element everytime
litwo.className = 'hidden';
// If a <li> element's text content that matches with null then hide that <li> element
if (litwo.textContent.match(clear_labels[lbl]) !== null) {
litwo.className = '';
} else if (searchb.val() === '') {
litwo.className = ''
}
}
}
}
})