Develop Reference

How to edit CSS of a JavaScript variable in JS?

I have a live search for a website and it's working just fine but I cannot seem to figure out how to highlight the search term in the result. Below is my JS code. I assume I need to edit the data-search-term variable but I am clueless about how to go about it.
I know only HTML/CSS. No JavaScript.
jQuery(document).ready(function($) {
$('.training-search-list li').each(function() {
$(this).attr('data-search-term', $(this).text().toLowerCase());
});
$('.training-search-box').on('keyup', function() {
var searchTerm = $(this).val().toLowerCase();
$('.training-search-list li').each(function() {
if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
Thanks in advance.

I made it long time ago
(function($){
$('#categoryFilter').focus().keyup(function(event){
var input = $(this);
var val = input.val();
if(val == ''){
$('#filter li').show();
$('#filter a span').removeClass('highlighted');
return true;
}
var regexp = '\\b(.*)';
for (var i in val) {
regexp += '('+val[i]+')(.*)';
}
regexp += '\\b';
$('#filter li').show();
$('#filter').find('a > span').each(function(){
var span = $(this);
var resultats = span.text().match(new RegExp(regexp,'i'));
if(resultats){
var string = '';
for (var i in resultats){
if(i > 0){
if(i%2 == 0){
string += '<span class="highlighted">'+resultats[i]+'</span>';
}else {
string += resultats[i];
}
}
}
span.empty().append(string);
}else {
span.parent().parent().hide();
}
});
});
})(jQuery);
Maybe you can try to make your own code with some part of mine

Sum with jquery not working

I have a lot of labels as shown on a page. I want to sum the values and store them in final_cpa.
HTML :
<label class="tmpcpa">32.1</label>
JS :
function calculate_final_cpa() {
var final_cpa = 0;
var allfilled = false;
$('.tmpcpa').each(function () {
if ($(this).val() != 0) {
final_cpa += parseInt($(this).text()) || 0;
allfilled = true;
} else {
allfilled = false;
}
});
console.log(final_cpa);
console.log(allfilled);
}
var run = setInterval(calculate_final_cpa, 500);
However final_cpa is always 0 and allfilled remains false.

That because label don't have a value attribute so the .val() function will always return an empty string, you have to use .text() instead to get the text content inside the label element :
if ($(this).val() != 0) {
Should be :
if ($(this).text() != 0) {
NOTE : as Rayon mentioned in the comment below text() will always return string so better to change the zero in condition to string '0'.
Hope this helps.
function calculate_final_cpa() {
var final_cpa = 0;
var allfilled = false;
$('.tmpcpa').each(function () {
if ($(this).text() != '0') {
final_cpa += parseInt($(this).text()) || 0;
allfilled = true;
} else {
allfilled = false;
}
});
console.log(final_cpa);
console.log(allfilled);
}
calculate_final_cpa();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="tmpcpa">32.1</label>

Check $(this).text() != "" instead of $(this).val() != 0 as You can not use .val() for getting label text. .text() will give you text of label
if ($(this).text() != "" && $(this).text() != "0") {
....
}

First thing, you need to use .text() instead of .val() to get the text inside a label. Also, if you are expecting your result to contain decimal digits, you need to use parseFloat():
function calculate_final_cpa() {
var final_cpa = 0;
var allfilled = false;
$('.tmpcpa').each(function () {
if ($(this).text() != 0) {
final_cpa += parseFloat($(this).text()) || 0;
allfilled = true;
} else {
allfilled = false;
}
});
console.log(final_cpa);
console.log(allfilled);
}
calculate_final_cpa();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<label class="tmpcpa">32.1</label>
<br />
<label class="tmpcpa">32.1</label>

Change
if ($(this).val() != 0)
to
if (parseInt($(this).text()) != 0)

Beside your code had an error, you should check the content of the table before parsing them. And because you use decimals in your example, you should switch from parseInt to parseFloat too.
And your allfilled varibale makes no sense, because if the last element of .tmpcpa was empty, it will be false again. So i removed it.
function calculate_final_cpa() {
var final_cpa = 0;
$('.tmpcpa').each(function () {
var content = $(this).text();
final_cpa += IsNumeric(content) ? parseFloat(content) : 0;
});
console.log(final_cpa);
}

Test it with .text instead of val() as label has no value property
Use Unary plus(+)/Number operator instead of parseInt as parseInt will ignore floating point
Use length of lable-elements to test whether all the label has values !== 0
function calculate_final_cpa() {
var final_cpa = 0;
var countOfFilled = 0;
$('.tmpcpa').each(function() {
if ($(this).text() !== '0') {
final_cpa += +($(this).text()) || 0;
++countOfFilled;
}
});
console.log('Total: ' + final_cpa);
console.log('All filled ' + $('.tmpcpa').length === countOfFilled);
}
calculate_final_cpa();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<label class="tmpcpa">32.1</label>
<label class="tmpcpa">32.1</label>
<label class="tmpcpa">0</label>

if statement echo out different links for different codes

I am using this code
HTML:
<div id="message">some message</div>
<input type="text" id="myInput" />​
jQuery:
$(function() {
$("#message").hide();
$("#fail").hide();
var prefix = ['HX', 'HD', 'BD', 'LS']
$('#myInput').keyup(function(e) {
var value = $(this).val();
var firstTwo = value.substr(0,2);
var firstTwoUpper = firstTwo.toUpperCase();
if(firstTwo != firstTwoUpper) {
$(this).val( value.replace(/^\w\w/, firstTwoUpper) );
}
if(value.length > 1) {
if($.inArray(firstTwoUpper, prefix) >= 0) {
$("#fail").hide();
$("#message:hidden").fadeIn();
} else {
$("#message").hide();
$("#fail:hidden").fadeIn();
}
} else {
$("#message").hide();
$("#fail").hide();
}
});
});
​
To be a post code check. I got the above code from here: Jquery check array perform function and it works just fine but I want to display a message containing a link which all differ from one another. For example I want code 'HX' to link to facebook and I want 'BD' to link to the BBC. How would I write the if statement correctly? I have tried various ways but I am not achieving what I need.
Could someone give me a little guideance please?
Thanks,
Ben.

This fiddle does what you might be looking for
<div id="message">Some link</div>
<div id="fail">Invalid postcode</div>
<input type="text" id="myInput" />
$(function () {
$("#message").hide();
$("#fail").hide();
var prefix = ['HX', 'HD', 'BD', 'LS'];
var links = ['http://www.facebook.com','http://www.example.com','http://www.bbc.com','#'];
$('#myInput').keyup(function (e) {
var value = $(this).val();
var firstTwo = value.substr(0, 2);
var firstTwoUpper = firstTwo.toUpperCase();
if (firstTwo != firstTwoUpper) {
$(this).val(value.replace(/^\w\w/, firstTwoUpper));
}
if (value.length > 1) {
var index = $.inArray(firstTwoUpper, prefix);
if (index >= 0) {
$("#fail").hide();
$("#message").fadeIn();
$("#message a").attr("href",links[index]).html(links[index])
} else {
$("#message").hide();
$("#fail:hidden").fadeIn();
}
} else {
$("#message").hide();
$("#fail").hide();
}
});
});

this fiddle: http://jsfiddle.net/um67M/2/
I changed prefix from an array of strings to an array of objects.
You're going to see an issue if users type really fast because of the speed of fadeIn().
$(function() {
$("#message").hide();
$("#fail").hide();
var prefix = [{code:'HX',link:'www.facebook.com'}, {code:'BD',link:'www.bbc.com'}];
$('#myInput').keyup(function(e) {
var value = $(this).val();
var firstTwo = value.substr(0,2);
var firstTwoUpper = firstTwo.toUpperCase();
if(firstTwo != firstTwoUpper) {
$(this).val( value.replace(/^\w\w/, firstTwoUpper) );
}
if(value.length > 1) {
for(var obj in prefix){
console.log(firstTwoUpper, prefix[obj].code, firstTwoUpper == prefix[obj].code);
if(firstTwoUpper === prefix[obj].code){
$("#fail").hide();
var link = ''+prefix[obj].link+'';
$("#message").append(link);
$("#message:hidden").fadeIn();
break;
}else {
$("#message").hide();
$("#fail:hidden").fadeIn();
}
};
} else {
$("#message").empty();
$("#message").hide();
$("#fail").hide();
}
});
});

$('#myInput').keyup(function (e) {
var value = $(this).val();
var firstTwo = value.substr(0, 2);
var firstTwoUpper = firstTwo.toUpperCase();
if (firstTwo != firstTwoUpper) {
$(this).val(value.replace(/^\w\w/, firstTwoUpper));
}
if (value.length > 1) {
if ($.inArray(firstTwoUpper, prefix) >= 0) {
if (firstTwoUpper == "HX") {
$("#message").empty();
$("#message").html('<p>some message</p>Google');
} else if (firstTwoUpper == "HD") {
$("#message").empty();
$("#message").html('<p>other message</p><a `enter code here`href="http://www.stackoverflow.com">Stack OverFlow</a>');
}
$("#fail").hide();
$("#message:hidden").fadeIn();
} else {
$("#message").hide();
$("#fail:hidden").fadeIn();
}
} else {
$("#message").hide();
$("#fail").hide();
}
});
the fiddle is here
fiddle

jQuery: Compact way to fetch values of all input fields?

I have a form with five input fields and a register button ('.register').
I want to enable the register button ONLY IF all fields have at least one character.
Here comes my code:
$(document).ready(function() {
// when page loads
$('.register').addClass('a_unclickable');
// Input validation
// Are all fields filled out?
$('input').on('keyup', function() {
var un_value = $('#username_operators').val();
var fn_value = $('#first_name_operators').val();
var ln_value = $('#last_name_operators').val();
var e_value = $('#email_operators').val();
var pw_value = $('#password_operators').val();
var pw_r_value = $('#password_repeat_operators').val();
if ((un_value.length > 0) && (fn_value.length > 0) && (ln_value.length > 0) && (e_value.length > 0) && (e_value.indexOf('#') !== -1) && (pw_value.length > 0) && (pw_r_value.length > 0)) {
$('.register').removeClass('a_unclickable');
} else {
$('.register').addClass('a_unclickable');
}
})
});
I have the feeling that there is a much easier way to achieve the same result. Does anyone of you have a compact suggestion?

That's quiet compact:
$(document).ready(function() {
// when page loads
$('.register').addClass('a_unclickable');
// Input validation
// Are all fields filled out?
$('input').on('keyup', function() {
$('.register').removeClass('a_unclickable');
$('input').each(function() {
if ($(this).val() === '') {
$('.register').addClass('a_unclickable');
}
});
})
});

A couple of things come to mind. First:
$('input').on('keyup', function() {
var valid = true;
$('#username_operators, #first_name_operators, #last_name_operators, #email_operators, #password_operators, #password_repeat_operators').each(function() {
if (/^\s*$/.test(this.value)) {
valid = false;
}
});
if (valid) {
$('.register').removeClass('a_unclickable');
}
else {
$('.register').addClass('a_unclickable');
}
});
You can combine all the Ids into one CSS selector. Really the cleanest way is to add a class name to each required input, then utilize event.target.form to find all required fields inside the form.
$('input').on('keyup', function(event) {
var valid = true;
$(event.target.form).find(".required").each(function() {
if (/^\s*$/.test(this.value)) {
valid = false;
}
});
if (valid) {
$('.register').removeClass('a_unclickable');
}
else {
$('.register').addClass('a_unclickable');
}
});

Wrap the inputs in a <div class="verifyLength" ></div>
Add the a_unclickable class to the register field by default.
Then jquery:
$('input').on('keyup', function() {
var emptyField = false;
$(".verfyLength").find("input").each(function()
{
if((this).val().length() <=0)
emptyField = true;
});
if(emptyField)
$('.register').addClass('a_unclickable');
else
$('.register').removeClass('a_unclickable');
});

Here you go JSFiddle
var arr = [un_value, fn_value, ln_value, e_value, pw_value, pw_r_value];
$.each(arr,function(i,item){ if(item.length > 0){
$('.register').removeClass('a_unclickable');
} else {
$('.register').addClass('a_unclickable');
}})
if you are able to read all the values with selector you could pass them
like:
$.each($('input'),function(i,item){ if($(item).val().length > 0){
$('.register').removeClass('a_unclickable');
} else {
$('.register').addClass('a_unclickable');
}})

Have a look at this jsfiddle:
var i = 0, count = 0;
$.each($( ":input" ), function( index, value ) {
if(value.value.length > 0) {
count++;
}
});
if(count === 6) {
console.log(true);
} else {
console.log(false)
}

AutoComplete (AutoFilter?), using jQuery delegate

$('#container form').delegate('#addSearch', 'keyup', function(e) {
var tmpVAL = $('#addSearch').val();
$('.w').each(function() {
var tmpHTML = $(this).html();
if (tmpHTML == tmpVAL) {
$(this).fadeIn(250);
} else if (tmpVAL.length < 1) {
$(this).fadeIn(250);
} else {
$(this).fadeOut(250);
}
});
});
and #addSearch is an <input type="text">.
So, my problem is that; this obviously will only return the results that are an exact match to the tmpVAL - How would I allow it so every letter will change the search result.
e.g.
I type N
it comes up with No, Not, Nothing, Nothingness
I type NOT
it comes up with Not, Nothing, Nothingness
Any help would be appreciated, I would imagine that it would be RegEx?

DEMO https://so.lucafilosofi.com/autocomplete-autofilter-using-jquery-delegate
$(function() {
$('#container form').delegate('#addSearch', 'keyup', function(e) {
var tmpVAL = $('#addSearch').val();
$('.w').each(function() {
var tmpHTML = $(this).text();
var subSection = tmpHTML.substring(tmpVAL.length, 0);
if (subSection == tmpVAL && tmpVAL != '' ) {
$(this).show();
} else {
$(this).hide();
}
});
});
});

You could use a regular expression, but I think that might be overkill. You could just use indexOf:
$('#container form').delegate('#addSearch', 'keyup', function(e) {
var tmpVAL = $('#addSearch').val().toLowerCase();
$('.w').each(function() {
var tmpHTML = $(this).html().toLowerCase();
if (tmpHTML.indexOf(tmpVAL) >= 0) {
$(this).fadeIn(250);
} else if (tmpVAL.length < 1) {
$(this).fadeIn(250);
} else {
$(this).fadeOut(250);
}
});
});
Working example: http://jsfiddle.net/andrewwhitaker/PRyvU/
Here's an alternative solution that doesn't use an .each():
$('#container form').delegate('#addSearch', 'keyup', function(e) {
var tmpVAL = $('#addSearch').val().toLowerCase();
var $words = $(".w");
var contains = function(haystack, needle) {
return haystack.indexOf(needle) >= 0;
};
if (tmpVAL.length < 1) {
$words.fadeIn(250);
}
else {
$words.filter(function() {
return !contains($(this).html().toLowerCase(), tmpVAL);
}).fadeOut(250);
$words.filter(function() {
return contains($(this).html().toLowerCase(), tmpVAL);
}).fadeIn(250);
}
});
http://jsfiddle.net/andrewwhitaker/EyJ6b/