I have made this jsFiddle for searching/filtering the div content which I am getting from an XML response. But I have done it for one text box alone. Any one can help me in implementing for next three?
For example:
If I am typing pd001 it shows the first 2 rows and if I type paste it should reach and filter from the current visible list, not from the whole list.
Kindly help me out on this.
If I'm not wrong then you must be trying to do is that If I search 2 rows based on pd001 and put paste in the next textbox then it should filter only those 2 rows not the entire grid. And the same functionality for all the other textboxes. In fact you need dependencies b/w textboxes.
Try this:
$(".productid").filter(function () {
$(this).parent().hide();
return $(this).text().toLowerCase().indexOf(text0) != -1
}).parent().show();
$(".product:visible").filter(function () {
$(this).parent().hide();
return $(this).text().toLowerCase().indexOf(text1) != -1;
}).parent().show();
$(".quantity:visible").filter(function () {
$(this).parent().hide();
return $(this).text().toLowerCase().indexOf(text2) != -1;
}).parent().show();
$(".amount:visible").filter(function () {
$(this).parent().hide();
return $(this).text().toLowerCase().indexOf(text3) != -1;
}).parent().show();
Demo: http://jsfiddle.net/fbC6w/4/
You are filtering only one column to, it may help you
$("#searchone , #searchtwo ,#searchthree ,#searchfour").bind("keyup", function() {
var map = {
'.productid': $("#searchone").val().toLowerCase(),
'.product': $("#searchtwo").val().toLowerCase(),
'.quantity': $("#searchthree").val().toLowerCase(),
'.amount': $("#searchfour").val().toLowerCase()
};
$('div.new').each(function() {
$(this).hide();
});
$('div.new').each(function() {
var parent_div = this;
$.each(map, function(key, value) {
$(parent_div).find(key).filter(function() {
if ($(this).text().toLowerCase().indexOf(value.toString()) != -1 && value != '') {
$(parent_div).show();
}
});
});
});
});
Related
I am trying to make search function to allow user to search in accordion. I am able to make it, but I want it to auto extend when user inputs text. Here is what I got
$('#box').keyup(function(){
var valThis = $(this).val().toLowerCase();
if(valThis == ""){
$('.source > li').show();
} else {
$('.source > li').each(function(){
var text = $(this).text().toLowerCase();
(text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();
});
};
});
So is it possible to extend an accordion during search?
I'm not sure what actually you trying to do with your code ? or your plan to do ?
anyway you try to display .source > li list item after search that not gonna work simply like that. Because first you have to display your accordion then try to show your list. replace your keyup() function like this
$('#box').on('keyup', function () {
// $('.ui-accordion-content').hide();
var valThis = $(this).val();
if(valThis == ""){
$('.ui-accordion-content').hide();
} else {
$('.item').each(function () {
var currentLiText = $(this).find('p').text().toLowerCase(),
showCurrentLi = currentLiText.indexOf(valThis) !== -1;
$(this).toggle(showCurrentLi);
$(this).closest('.ui-accordion-content').show();
});
$('.ui-accordion-content').each(function () {
if($(this).children('.source').children(':visible').length == 0) {
$(this).hide();
}
});
}
});
and full example with your code https://jsfiddle.net/05e1smbs/
Note I changed little-bit on <li class="item"><span class="closer">x</span><p>Aaron</p></li> li markup for get the text of the li. See here https://jsfiddle.net/05e1smbs/
There is a table which contains an user dropdown per row. Needs to prevent of selecting duplicate users of dropdown in the table.
While selecting the duplicate user in the above table as "easy",The js code should keep the first of user dropdowm the rest of duplicate user dropdown wants to remove from table.
HTML
Javascript Code
function checkDuplicateUserId(obj){
var user_id=$("#"+obj.id+" option:selected").val();
$('tbody#data tr select').each(function (i, row) {
if ($('tbody#data tr select').find('option[value="' + $(this).val() + '"]').size() > 1) {
alert();
}
});
}
function checkAlreadySelected(obj){
checkDuplicateUserId(obj);
var num = parseInt($(obj).attr('num'));
var user_id=$("#"+obj.id+" option:selected").val();
var next_user_id=$("#user_id_"+eval(num+1)+" option:selected").val();
if(user_id && typeof next_user_id == 'undefined'){
var row = updateSrNo(num);
$("#data").append(row);
}
}
As i mentioned in the js code, I have written a function as called as checkDuplicateUserId() to detect the duplicate dropdown from the table, Unfortunately the alert() not prompted while select the duplicate users.
What's the issue of jquery code which i have written wrongly there?
If you have other way to accomplish this, Please say it
Thanks in advance
Try this:
function checkDuplicateUserId(obj){
var user_id=$("#" +obj.id + " option:selected").val();
if( $('tbody#data tr select option:selected').filter( function(){ if( $(this).val() == user_id ) return true; } ).length > 1) {
alert('something');
}
}
You can do something like this:
function checkAlreadySelected(obj){
var user_id=$("#"+obj.id+" option:selected").val();
$('tbody#data tr select').each(function (i, row) {
if ($(this).val()==user_id) {
return false ;
}
});
return true ;
}
I have 2 select drop down menus. I want to to add a class once a option has been selected from both menus.
$('#size').change(function(){
if ($(this).val() > 0 ) {
$('#pizza').addClass('pizzaImage');
}
});
$('#crust').change(function(){
if ($(this).val() > 0 ) {
$('#pizza').addClass('pizzaImage');
}
});
This is my code so far, it works when I select an option from one. Basically I want to put these together I just don't know the syntax to do so. I also tried this but no results.
var size = $('#size')
var crust = $('#crust')
function image () {
if ((crust).val > 0 && (size).val > 0) {
$('#pizza').addClass('pizzaImage');
}
}
var $selects = $('#size, #crust');
$selects.change(function(){
var bothSelected = this.value && $selects.not(this).val();
$("#pizza").toggleClass("pizzaImage", bothSelected);
});
I would start by adding a common class between the two, to make it easier to bind the function to both select elements at the same time. Maybe something like pizzaOptions. Then, you could do something like this:
$(".pizzaOptions").on("change", function(){
var sizeSelected = $("#size").val() !== "";
var crustSelected = $("#crust").val() !== "";
if(sizeSelected && crustSelected){
$('#pizza').addClass('pizzaImage');
}
});
I'm trying to search multiple data results based on inline data attributes.
However, I can only figure out how to search a single data attribute instead of them all.
How would I accomplish this?
What I have: http://jsfiddle.net/9SMZC/2/
$("input[type=text]").keyup(function () {
var filter = $(this).val();
$("a").each(function () {
if ($(this).attr("data-event-name").search(new RegExp(filter, "i")) < 0) {
$(this).hide();
} else {
$(this).show();
matches++;
}
});
});
Thanks in Advance!
If you want to apply a "or" logic, you may do this :
$("input[type=text]").keyup(function () {
var filter = $(this).val();
$("a").each(function () {
var data = $(this).data();
$(this).hide();
for (var key in data) {
if (~data[key].search(new RegExp(filter, "i"))) {
$(this).show();
break;
}
}
});
});
Demonstration (try to search "andrew" for example)
The idea is to get the data object and iterate over the properties. To simplify the code (that is to avoid keeping a boolean) I also always hide and show when the element is ok.
I have four jquery sliders in a page with these scripts:
$(document).ready(function(){
$("#information").click(function(){
$("#information_show").slideToggle("medium");
});
});
$(document).ready(function(){
$("#menu").click(function(){
$("#menu_slide").slideToggle("medium");
});
});
$(document).ready(function(){
$("#books").click(function(){
$("#books_toggle").slideToggle("medium");
});
});
$(document).ready(function(){
$("#content").click(function(){
$("#content_div").slideToggle("medium");
});
});
So for example when I click on the div #information the #information_toggle is visible. I wounder if there is any way to make the sliders only show one at once.
Example: When click on #books, the #books_toogle show. Now when click on #menu the #menu_slide shows, at the same time the #menu_slide shows #books_toggle toogle/close automatic. So only one hidden div will show at once.
It would help to see your html, but it is easy to do this in an ugly way:
$("#information").click(function(){
$("#information_show").slideToggle();
$("menu_slide, books_toggle, content_div").slideUp();
});
However, a much prettier way to do this would be with classes:
$(".slider").on('click', function () {
var $assocDiv = $(".slider_show").eq($(this).index));
$assocDiv.slideToggle();
$(".slider_show").not($assocDiv).slideUp();
});
Regardless, you only need one $(document).ready, which can just be written as $(, and 'medium' is already the default animation speed.
Though it should be posted on CodeReview(imho), here's what you can do:
$(document).ready(function () {
var last, last2;
$("#information").click(function () {
$("#information_show").slideToggle("medium");
if (last != '#information_show' && last != last2) $(last).slideToggle("medium");
last2 = last;
last = '#information_show';
});
$("#menu").click(function () {
$("#menu_slide").slideToggle("medium");
if (last != '#menu_slide' && last != last2) $(last).slideToggle("medium");
last2 = last;
last = '#menu_slide';
});
$("#books").click(function () {
$("#books_toggle").slideToggle("medium");
if (last != '#books_toggle' && last != last2) $(last).slideToggle("medium");
last2 = last;
last = '#books_toggle';
});
$("#content").click(function () {
$("#content_div").slideToggle("medium");
if (last != '#content_div' && last != last2) $(last).slideToggle("medium");
last2 = last;
last = '#content_div';
});
});