How to highlight searchtext records in javascript? - javascript

Name Role
applicationame role id
application1 appadministrator 1490
application developer 1498
application2 tester 1460
I need the result like if entered 'app' as searchtext need to highlight all rows ,because all rows are having app.if entereted 'application' as searchtext then need to highlight 2nd row only. because exact macth.like that i need to check all columns i.e aplication,role etc.
no need of hide the unmacthed rows.need to highlight matching only if not macth just display as it is.
if user entered '14' as searchtext need to highlight all rows.if he entered 1490 need to highlight 1strow and display remaining rows as it is.please help me to achieve this.
My fidler: http://jsfiddle.net/kUxNj/4/
Please modify my fidler according this.

You should replace this:
if ($(this).find('td:first-child').text().toUpperCase() === text.toUpperCase() ||
$(this).find("td:eq(1)").text().toUpperCase() === text.toUpperCase()
)
With this:
if ($(this).find('td:first-child').text().toUpperCase().indexOf(text.toUpperCase()) != -1 ||
$(this).find("td:eq(1)").text().toUpperCase().indexOf(text.toUpperCase()) != -1
)
How it works: your code looks whether the given text is equal to one of the rows, but my code checks whether one of the rows contains the given text, using the indexOf() method.
And to avoid hiding of non-matching elements, remove the following code:
if(grid.find('td.result').length >0){
grid.find('td').not('.result').parent('tr').hide();
}
Updated fiddle: http://jsfiddle.net/kUxNj/7/

Using the match() method instead of the equality check:
if ($(this).find('td:first-child').text().toUpperCase().match( text.toUpperCase()) ||
$(this).find("td:eq(1)").text().toUpperCase().match( text.toUpperCase()))
{
$(this).children('td').addClass('result');
}
I also removed the hide() and show() calls as they are redundant to highlighting rows like you ask.
Updated fiddle: http://jsfiddle.net/kUxNj/9/

Related

Check values of loop to see if ANY match?

In ruby, I would do something like:
array = [1,2,3]
array.any? {|a| a == 1}
=> true
Although, instead of an array, I am going up against a hash
var shop_products = {"607":607};
I have a checkbox loop and I want to check against all currently checked boxes for when checkboxes are both checked and unchecked to then see if there is a matching value and disable/able and hide/show a button if so.
code: https://jsfiddle.net/mk879vu2/7/
As #Mark Meyer mentioned, some can help but is there a way to use this against a hash or an alt for hashes?
I tried this: https://jsfiddle.net/jq9sgp58/
Maybe I am using this wrong?
My issue right now is when a checkbox is unchecked, it sees that the value is the "correct" one, but it isn't displaying the button when I uncheck. I'm doing something wrong in the conditional somehow.
In the jsfiddle I have all of the inputs but I only want one of the buttons (of the 2) to appear when a record with specific parameters is checked (in the example this is value=607, this can be any amount but in the example I have it as 1 record/input). But when I uncheck and the 607 is left alone as the only checked input, it runs the hide/disable and not the show.
What is wrong with my code?
It sounds like you are looking for #array.some()
let a = [1,2,3]
console.log(a.some(n => n === 1)) // true
console.log(a.some(n => n === 4)) //false
https://jsfiddle.net/2kaegb59/
The .some seemed like the way to get it done but i couldn't get it to work with the hash. I'm sure it's possible. Although, I ended up just checking for an undefined through the hash instead of trying to match up the check value with the hash value and it is likely unnoticeably faster.
for (var check of checked_checkboxes_check) {
if (shop_products[check.value] === undefined) {
print_submit.hide().prop("disabled", true);
break;
} else {
print_submit.show().prop("disabled", false);
}
}

Show alert after all requirements have been met

I have a form where the user can 1.) check one option and be done. or 2.) check the other option and fill out a text field.
Whole thing is, after all is said and done I'd like for my alert to show, but it doesn't.
$('.know-your-role').show('fast', function() {
var $checkboxes = $('input:checkbox.checkchoice');
if($checkboxes.is(':checked')){
// show this after checked and the input has been filled.
alert('cool');
}else if($checkboxes.is(':checked') & $(".year").va() != "" ){
alert('cool');
}
});
How do I get the alert to show after all requirements (checkboxes and input) have been met?
I've made a fiddle here to show what I'm working with.
Thank you for your help in advance.
As well as the previous correct answers (missing & and misspelled val) there is a more fundamental logical issue here. You seem to have this structure:
if (conditionA) {
// behaviorA
} else if (conditionA && conditionB) {
// behaviorB
}
You will never reach behaviorB with such logic. If conditionA fails then conditionA && conditionB will certainly also fail.
Do you need to reverse the order of your if and else-if blocks?
Missing '&'
$checkboxes.is(':checked') && $(".year").val() != ""
You should use && instead of & for boolean comparisons, and also you appear to have mis-typed val as va.
I would suggest having two events, one on the 'Teacher' check box being checked and one on the year field being completed. Both events can trigger a single function that shows your alert and whatever other logic you want. So there is little duplication.
This helps to separate the events from the logic that shows/hides the year field and more easily allows you to perform different actions for the two events if that's a requirement.

jQuery filter method usage

What's the use of below snippet ? I extracted it from jQuery API. I don't understand it:
$("div").filter( $("#unique") )
Please be kind enough to explain this to me.
It is extracting the only one div with id=unique.
$('div'). // return all divs
filter( $('#unique') ); // take the div with id=unique
So. this statement will return you the div with id=unique.
Note
This statement can also be written as $('div#unique') or just $('#unique').
The filter method enables you to filter out only specific elements from amongst a selection. Say you want to choose all spans whose text contains more than 3 characters. So you would do this:
$("span").filter(function() { return $(this).text().length > 3; }).click(...);
The function should check for some condition and return a boolean. if it sends true that element is kept in the selection, else discarded. So for your current question, it would

How to phrase 'has not' in jquery?

For a page in our app there is a certain number of customers that are generated in a list when the page is loaded. As one scrolls down on this page more customers are generated towards the bottom of the list, and so forth till one scrolls all the way down and there are no more customers to generate.
I am trying to check, within an .on() function, if the new generated customers at the bottom has a clock icon, and if not then to add a clock icon to the new customers. This is my check:
var isClock = $(timepickers).parent().has('.clockIcon').length ? '' : addClock;
if (typeof isClock === 'function') {
isClock();
}
The problem is that the customers that were originally there to start with on the page, of course have the clock icon, so because some of the customers have a clock icon its not adding it to any of the ones that don't have one now. The .has() makes more since, but I like the idea of the .is() because of what it says on the jquery website:
Check the current matched set of elements against a selector, element, or jQuery object and return true IF AT LEAST ONE of these elements matches the given arguments.
And thats what I needed for it to check if ANY of the customers don't have the clock icon then to add it. I cannot think of way to use the .is() so instead I am thinking to use the .not() or not: to see if any of the customers don't have the clock icon then run the function. But I am not sure how to say 'if something does not have something' not 'if something is not something'. Anyone know how to do this????
Use not() instead of has()
Just negate the expression?
var isClock = ( ! $(timepickers).parent().has('.clockIcon').length ) ) ? '' : addClock;
first thing i thought of, was http://api.jquery.com/attribute-contains-word-selector/
$(timepickers).parent().find('class=~"clockIcon"').length ? '' : addClock;
but it might not even be the simplest for your case
While not too pretty (I don't know jQuery) this would fire the event if the elements with the icon doesn't equal the total amount of elements
var isClock = $(timepickers).parent().has('.clockIcon').length == $(timepickers).length ? "" : addClock;
if (typeof isClock === 'function') {
isClock();
}
That being said, I'm sure there is a concise way to do this with proper jQuery
See jQuery .not(). Also use .each that way you can go over each item's parent and check it individually:
$(timepickers).each(function () {
// If the parent doesn't have clockIcon then add it
if (!$(this).parent().hasClass('clockIcon')) {
addClock();
}
});

Check value of starting characters of an input Jquery

I have a text field that can accept input of any kind. Based on the input, I need to make some fields hidden and others unhidden. However I want to put another condition within the first condition to check for the first 3 characters of the input value
Here is my code for the first condition:
$("#accountcodes").live("focusout",function(){
var code = $(this).val();
if(code>30000){
alert("T1 to T4 codes needed");
$(this).parents("tr").find('#T1').removeAttr('hidden','hidden');
$(this).parents("tr").find('#T2').removeAttr('hidden','hidden');
$(this).parents("tr").find('#T3').removeAttr('hidden','hidden');
$(this).parents("tr").find('#T4').removeAttr('hidden','hidden');
}
})
I want to put another condition within the if statement(if within an if) to check if the first 3 characters start with 310 or 311 then do something else e.g if a user inputs 31102, then another field is unhidden e.t.c I am not sure how to do that in Jquery. should I use regex? do I take the value of input and cut out the first three characters and check it?
Any help will be appreciated
So you just want to know about substr()? code.substr(0,3) would get you the first three characters.
Alternatively, you may want to use a regex to find 310 and 311 more easily, in which case you want code.match(/^31[01]/) instead.
var code = $(this).val();
var firstThreeChars = code.substr(0, 3);
It seems your values will always be numeric. You don't need much jquery to achieve this.
$("#accountcodes").live("focusout",function(){
var code = $(this).val();
if(code > 30000){
//Note: For any non-numeric value, this condition will always be false
alert("T1 to T4 codes needed");
var p = $(this).parents("tr");
p.find('#T1, #T2, #T3, #T4').removeAttr('hidden');
if ((code - 31000) > 102){ // Your other condition check can look like this
// unhide other fields
}
}
});
Hope this will help. Happy Coding.
Your Question have your answer you can do it many ways
Sub-string the value and check the value.
2.go for contains key word of jquery [ api.jquery.com/contains-selector/][1]

Categories