I have a following jQuery which searches text in table rows and it works fine. The issue is that I would like to ignore/remove spaces when searching some text e.g.: I want to find this in a table:
'John Smith'
but when I type in search bar: Johnsmith then record is not found. So I would like to remove spaces in my jQuery code to find any text ignoring spaces. Here is my jQuery with commented code which removes spaces but it doesn't work:
$('document').ready(function() {
$('#search').keyup(function() {
search_table($(this).val());
});
function search_table(value) {
$('table .rows').each(function() {
var found = 'false';
$(this).each(function () {
//if ($(this).text().replace(" ", "").toLowerCase().indexOf(value.toLowerCase()) >= 0) {
if ($(this).text().toLowerCase().indexOf(value.toLowerCase()) >= 0) {
found = 'true';
}
});
if (found == 'true') {
$(this).show();
} else {
$(this).hide();
}
});
}
});
use .replace(/ /g,"") to replace all spaces (groups of spaces)
if ($(this).text().toLowerCase().replace(/ +/g,"").indexOf(value.toLowerCase()) >= 0) {
found = 'true';
}
Related
I am trying to add a search filter so that user can find results from this list of contracts while they are typing. E.g.: if a user types "IP", then the top 4 results should be displayed. Following is the function:
$('#doc_search').on('keyup', function(){
var inputtext = $(this).val().toLowerCase();
$('.subdoclist li a').each(function() {
if(inputtext ==''){
$('.subdoclist li').each(function(){
$(this).addClass('show');
});
console.log(inputtext);
} else if ($(this).text().toLowerCase() === inputtext) {
$('.subdoclist li').removeClass('show');
$(this).parent().addClass('show');
console.log(inputtext);
}
});
})
'#doc_search' is the search field on top
'.subdoclist li' are the list items that contain anchor tags with text
At the moment, I have to type exact text and only then the search works.
Fiddle link: Click here
Here it is with a couple of things fixed up, first I'm using indexOf > -1 to see if the input string is contained within each potential match, and instead of removing show on all of them per-match I do it before it performs the search.
$('#doc_search').on('keyup', function() {
var inputtext = $(this).val().toLowerCase();
if (inputtext != '') {
$('.subdoclist li').removeClass('show');
$('.subdoclist li a').each(function() {
if ($(this).text().toLowerCase().indexOf(inputtext) > -1) {
$(this).parent().addClass('show');
}
});
} else {
$('.subdoclist li').addClass('show');
}
});
If you want a simple search, you can check if the text entered is contained on the string like this:
How to check whether a string contains a substring in JavaScript?
You can check each word entered on the search, splitting the string with space delimiter and using a loop but that will take more effort if there too words or a lot if entries.
Short and case-sensitive variant:
$('#doc_search').on('keyup', function() {
var inputtext = $(this).val();
if (inputtext !== '') {
$('.subdoclist li').each(function() {
$(this).toggle($("a:contains('"+ inputtext +"')",$(this)).length > 0);
});
} else {
$('.subdoclist li').show();
}
});
What I want is to be able to search the DOM for a certain string. If the text is on the page hide certain elements and show others. The catch is the id's are given dynamically within a PHP foreach statement.
I've tried to search for an .exists() function specific to text. So far I've tried:
jQuery(document).ready(function($) {
var string1 = 'string1',
string2 = 'string2';
if ($('li').children().text() === string1) {
if ($('li').children().text() === string2) {
$(this).parent().show();
} else {
$(this).parent().hide();
}
} else {
if ($('li').children().text() === string2) {
$(this).parent().hide();
} else {
$(this).parent().show();
}
}
});
so what I'm looking for:
1) search page for string1.
2) if string1 exists on the page show the parent of the child element that contains string2 and hide any other string.
3) if it doesn't exists hide string1 and string2.
but that doesn't work. I'm not the greatest at Jquery/JS and in general I'm a beginner with it..
To see if a string contains another (sub)string you can use indexOf.
And check if it is not -1.
Using each() you can loop over all li elements. Taking your jsFiddle (provided in comment) into account, I got this result: http://jsfiddle.net/ub8c6smh/5/
jQuery(document).ready(function($) {
var string1 = 'string1',
string2 = 'string2';
var string1exists= $('li').text().indexOf( string1)!==-1;
console.log(string1exists);
$('li').each(function () {
if ($(this).text().indexOf( string2)!==-1 && string1exists==true) {
// this child contains string 2
$('li').hide(); //hide all others
$(this).show();
}
if ($(this).text().indexOf( string2)!==-1 && string1exists==false) {
// this child contains string 2
$(this).hide();
}
if ($(this).text().indexOf( string1)!==-1 && string1exists==false) {
// this child contains string 1
$(this).hide();
}
});
});
I have problem with indexOf.
I have search and when I type something, .mark-select li will disappear or appear, depend on key word, I want to do something when there is not words in search that contains in .marka-select li . I don't know how to check when there is not same words.
Help please!
This is my code :
$("#marka").keyup(function() {
var marka = $("#marka").val().toLowerCase();
if(marka != "") {
$(".marka-select li").hide();
$(".marka-select li").each(function() {
var trenutna_marka = $(this).attr("data-keywords").toLowerCase();
if(trenutna_marka.indexOf(marka) >=0) {
$(this).show();
}
});
} else {
$(".marka-select li").show();
}
});
Of course it is possible that I just do not understand the question but why not just add an else statement to your if indexOf check?
if(trenutna_marka.indexOf(marka) > -1) {
$(this).show();
} else {
... do something else ...
}
JS:
var KEYS = { SPACE: 32 };
var str = $('#id_phone_daytime').val();
$("#id_phone_daytime").keyup(function(e) {
$.trim(str)
$('#id_phone_daytime').val(str);
if (e.keyCode == KEYS.SPACE) {
alert("No space please")
}
});
html:
No space please
The above code is for validating white space for a single input field. It is working fine, but in my application I have 8 more input fields with different ids. I want to validate white space validation for these 8 input fields also.
How to implement the same functionality with minimum amount of code?
Instead of using an id selector (which has to be unique) use a class selector, which can be used to group elements. Try this:
var KEYS = { SPACE: 32 };
$(".no-spaces").keyup(function(e) {
var $this = $(this);
$this.val($.trim($this.val()));
if (e.keyCode == KEYS.SPACE) {
alert("No space please");
}
});
All you need to do now is add class="no-spaces" to the relevant inputs.
var KEYS = { SPACE: 32 };
$(".no-spaces").keyup(function(e) {
this.value=$.trim(this.value);
if (e.keyCode == KEYS.SPACE) {
alert("No space please");
}
});
You can assign multiple selector using class, for example
<input type="text" class="validate_white_space">
and use this class like below.
var str = $('.validate_white_space').val();
$(".validate_white_space").keyup(function(e) {
$.trim(str)
$('#id_phone_daytime').val(str);
if (e.keyCode == KEYS.SPACE) {
alert("No space please");
}
});
$(document).ready(function () {
$("#btnhighlight").click(function () {
var htext = $("#txthighlighttext").val();
if (htext == '') {
alert("Pleae enter the search item.");
return false;
}
$("#lstCodelist option").each(function () {
$(this).removeClass('searchItem');
if ($(this).text().search(htext) != -1) {
$(this).addClass('searchItem');
}
});
});
});
Lets take I have a row something like this
I love to work with Jquery.
If I enter my search text as jquery its not highlighting Jquery. But my query should work in both they way regardless of CAPS or SMALL letters.
how to change my code to work like that.
thanks for your all help.
use .toUpperCase() ............. // or lowerCase
if ($(this).text().toUpperCase().indexOf(htext.toUpperCase()) != -1) {
This one should work, I believe:
$(document).ready(function () {
$("#btnhighlight").click(function() {
var htext = $("#txthighlighttext").val().toLowerCase();
if (htext === '') {
alert("Please enter the search item.");
return false;
}
$("#lstCodelist option").each(function() {
var $this = $(this);
if ($this.text().toLowerCase().indexOf(htext) !== -1) {
$this.addClass('searchItem');
} else {
$this.removeClass('searchItem');
}
});
});
});
Sidenote: indexOf is proven to be faster than search.