How to remove the duplicate values in textbox

How to remove the duplicate values in textbox - javascript

<script>
$("#filter").on("shown.bs.popover",function(){
$(".popover-content input[type=checkbox]").on("click",function(){
if(this.checked)
{
this.setAttribute("checked","checked");
}
else
{
this.removeAttribute("checked");
}
$("#customdiv").html($(".popover-content").html());
});
});
function fieldsFilter(flag,value,chkClass)
{
var checkedfields = new Array();
$('.'+chkClass).each(function()
{
if($(this).is(':checked'))
{
checkedfields.push($(this).val());
document.getElementById('scatFilters').value;
document.getElementById('ssrcFilters').value;
}
else
{
document.getElementById('scatfFilters').value='';
document.getElementById('ssrcfFilters').value = '';
}
});
$('#'+flag+'Filters').val(checkedfields);
}
</script>
<div id="content" class="content">
<div class="container">
<div class="email-btn-row hidden-xs inbox-actions" id="inbox-actions">
</i>
<div class='hide' id='customdiv'>
<div class="panel-group">
<button href="#" class="btn btn-link btn-sm" onclick="clearFilter()">Clear Filter</button>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
<i class="more-less glyphicon glyphicon-plus"></i>
Representatives
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<?php
foreach($rep_options as $rep_id => $rep_name){?>
<input type="checkbox" class="RepClicked" name="rep_<?=$rep_id?>" id="rep_<?=$rep_id?>" onchange="fieldsFilter('rps',this.value,'RepClicked');" value="<?=$rep_id?>" <? if(in_array($rep_id,$rep_name)) { echo "checked"; } ?>/>
<span style="font-size:12px;"><?=$rep_name?></span>
<br/>
<?php }?>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="true" aria-controls="collapse2">
<i class="more-less glyphicon glyphicon-plus"></i>
Status
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<?php
foreach($status_options as $status_id => $status){?>
<input type="checkbox" class="StatusClicked" name="status_<?=$status_id?>" id="status_<?=$status_id?>" onchange="fieldsFilter('sts',this.value,'StatusClicked');" value="<?=$status_id?>" <? if(in_array($status_id,$status)) { echo "checked"; } ?>/>
<span style="font-size:12px;"><?=$status?></span>
<br/>
<?php }?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="email-btn-row hidden-xs inbox-actions" id="inbox-actions" style="float:right">
<form id="allFilters" name="" class="" method="post" action="<?php echo base_url();?>missed_call_campaign/export">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
<input type="text" name="rpsFilters" class='hiddenFld' id="rpsFilters" value="<?=implode(',',$rep_id);?>" placeholder="rps"/>
<input type="text" name="stsFilters" class='hiddenFld' id="stsFilters" value="<?=implode(',',$status_id);?>" placeholder="sts"/>
</div>
</div>
</form>
</div>
</div>
</div>
If i check the checkbox in popover, the text box will hold the values double times, actually what i want is the textbox should taken the value single time. The above jquery script is used for hold the checked checkbox value when i close the popover. Because of the first jquery script, the value in the textbox is taken double times. sorry for my english. can any one please help me out of thisenter image description here

wrap your checkedfields.push($(this).val()) line inside a condition
like
if(checkedfields.indexOf($(this).val())==-1){
checkedfields.push($(this).val());
}

Related

How do you get this div element to appear after button.addEventListener is pressed?

Basically I am trying to use Bootstrap's accordion drop-down menus to appear when a player is searched up after the button is pressed. Here is my code:
<form>
<div class="userContainer">
<button id="submitButton"><i class="fi-xnsuxl-search"></i></button>
<input class = "form-control" id = "displayUsers" type = "text" placeholder="Username/UUID" aria-label = "Search">
</div>
</form>
<br />
<div class="row">
<div class="column">
<div class="container-fluid">
<div id="skin_container"></div>
</div>
</div>
</div>
<br /> <br />
<div class="container-fluid">
<div class="panel-group" id="faqAccordion">
<div class="panel panel-default ">
<div class="panel-heading accordion-toggle question-toggle collapsed" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question0">
<h4 class="panel-title">
BuildUHC
</h4>
</div>
<div id="question0" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<h5><span class="label label-primary"><div class = "container-stats-1"></div></span></h5>
</div>
</div>
</div>
<div class="panel panel-default ">
<div class="panel-heading accordion-toggle collapsed question-toggle" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question1">
<h4 class="panel-title">
Combo
</h4>
</div>
<div id="question1" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<h5><span class="label label-primary"><div class = "container-stats-2"></div></span></h5>
</div>
</div>
</div>
<div class="panel panel-default ">
<div class="panel-heading accordion-toggle collapsed question-toggle" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question2">
<h4 class="panel-title">
Potion
</h4>
</div>
<div id="question2" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<h5><span class="label label-primary"><div class = "container-stats-3"></span></h5>
</div>
</div>
</div>
<div class="panel panel-default ">
<div class="panel-heading accordion-toggle collapsed question-toggle" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question3">
<h4 class="panel-title">
Parkour
</h4>
</div>
<div id="question3" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<h5><span class="label label-primary"><div class = "container-stats-4"></span></h5>
</div>
</div>
</div>
</div>
<!--/panel-group-->
</div>
I have it setup in JavaScript as:
const button = document.getElementById("submitButton");
button.addEventListener("click", fetchUser);
fetchUser is the function I created to display data when it fetches from the API it's using. I want it to basically show the container-fluid div when it is pressed and fetches data, not at the start of the page. It would also be nice to have an "Error: Not a valid player" message show up if the API doesn't find anybody, but that's another issue for another time I suppose.
Hopefully you can help me out,
Thanks.

Accordion, how to automatically collapse one and expand next

I have an accordion with three "panels" First one is expanded on inital load.
The first panel have an input field. When the user has updated this field I would like to automatically expand the next panel and collapse the current panel.
The accordion it self works as expected ( I have jquery avaiable on the page).
I have searched and only found examples of expanding/collapsing by clicking on a link/button.
How do I do that?
This is my code:
$(document).ready(function() {
// Add minus icon for collapse element which is open by default
$(".collapse.in").each(function() {
$(this).siblings(".panel-heading").find(".glyphicon").addClass("rotate");
});
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function() {
$(this).parent().find(".glyphicon").addClass("rotate");
}).on('hide.bs.collapse', function() {
$(this).parent().find(".glyphicon").removeClass("rotate");
});
});
<div class="bs-example">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span
class="glyphicon glyphicon-menu-right"></span> Text</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row">
<div class="col-sm-3">
<label for="text">Text</label>
</div>
<div class="col-sm-1"></div>
<div class="col-sm-8">
<input type="text" class="form-control" id="textfield" ng-model="textfield" ng-blur="c.updatedField()">
<br />
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span
class="glyphicon glyphicon-menu-right"></span> More text</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<h4 class="panel-title">More text</h4>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span
class="glyphicon glyphicon-menu-right"></span> Even more text</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<h4 class="panel-title">More text</h4>
</div>
</div>
</div>
</div>
</div>

you could find a working solution in this snippet. The idea is to manually manipulate the bootstrap collapse elements.
$(document).ready(function() {
// Add minus icon for collapse element which is open by default
$(".collapse.in").each(function() {
$(this).siblings(".panel-heading").find(".glyphicon").addClass("rotate");
});
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function() {
$(this).parent().find(".glyphicon").addClass("rotate");
}).on('hide.bs.collapse', function() {
$(this).parent().find(".glyphicon").removeClass("rotate");
});
});
$(document).on("change", "#textfield", function(){
$("#collapseOne").collapse('hide');
$("#collapseTwo").collapse('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bs-example">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span
class="glyphicon glyphicon-menu-right"></span> Text</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row">
<div class="col-sm-3">
<label for="text">Text</label>
</div>
<div class="col-sm-1"></div>
<div class="col-sm-8">
<input type="text" class="form-control" id="textfield" ng-model="textfield" ng-blur="c.updatedField()">
<br />
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span
class="glyphicon glyphicon-menu-right"></span> More text</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<h4 class="panel-title">More text</h4>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span
class="glyphicon glyphicon-menu-right"></span> Even more text</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<h4 class="panel-title">More text</h4>
</div>
</div>
</div>
</div>
</div>

Nested bootstrap collapse onclick event

I'm new to bootstraps and coding altogether, so I am currently trying to open my main bootstrap panel with an onclick -event which contains nested sub panels.
This is my index.html containing the panels and the button;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form onsubmit="return false" id="searchForm">
<input type="button" value="Search" id="search" class="openPanel" />
</form>
<br/><br/>
<div class="container">
<div class="panel-groupMain">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Main panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<!-- Sub panels -->
<div class="panel-group" id="accordion">
<!-- Sub panel 1 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Sub panel 1</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentOne"></p>
</div>
</div>
</div>
<!-- Sub panel 2 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Sub panel 2</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<div class="day" data-name="Tuesday"></div>
<p id="contentTwo"></p>
</div>
</div>
</div>
<!-- Sub panel 3 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Sub panel 3</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentFive"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I've tried this code for opening the main -panel but I can't get this to work;
<script type="text/javascript">
$(document).ready(function () {
$("#search").on("click", function () {
$(this).closest('.panel-heading').find('.collapse').collapse('show');
});
});
</script>
So as for my question, is there any easy and effective way to only open the main -panel with the button click and after it's opened the button won't affect the panel anymore?
Thanks.

Here you go with a solution https://jsfiddle.net/hbfvta27/
$(document).ready(function () {
$("#search").on("click", function () {
if( !$('.collapse').first().hasClass('in'))
$('a[data-toggle="collapse"]').first().click();
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form onsubmit="return false" id="searchForm">
<input type="button" value="Search" id="search" class="openPanel" />
</form>
<br/><br/>
<div class="container">
<div class="panel-groupMain">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Main panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<!-- Sub panels -->
<div class="panel-group" id="accordion">
<!-- Sub panel 1 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Sub panel 1</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentOne"></p>
</div>
</div>
</div>
<!-- Sub panel 2 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Sub panel 2</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<div class="day" data-name="Tuesday"></div>
<p id="contentTwo"></p>
</div>
</div>
</div>
<!-- Sub panel 3 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Sub panel 3</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentFive"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Hope this will help you.

just add a class named 'in' on click of a bootstrap panel I hope it will help you
$(document).ready(function () {
$(".panel-groupMain").on("click", function () {
$(this).find('#collapse1').toggleClass('in');
});
});

Calling a function by a specific div's elements is not working in jQuery

I have a accordion menu, where I have some links in some div with id. Here I have two div with id=collapseThree and id=collapseFour. Now I want a simple alert when any link element of collapseFour div is clicked. But no alert or console.log.
Here are my attempts. My view:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-th-large">
</span>Hospital</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-asterisk link-item"></span>Hospital Member
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-th-large">
</span>Somiti</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-asterisk link-item"></span>Somiti Member
</td>
</tr>
</table>
</div>
</div>
</div>
My jQuery code:
$(document).ready(function () {
console.log("ready");
$("#collapseFour").on("click", ".link-item", function() {
console.log("Clicked");
});
})
All I want to view the Clicked text.

Since the span element with link-item class is not a parent of the clicked element, your code won't work properly. You can either move the closing tag of the span after the a element or use .next() function to refer to the next element just right after the span.
<span class="glyphicon glyphicon-asterisk link-item">
Somiti Member
</span>
$(document).ready(function() {
console.log("ready");
$("#collapseFour .link-item").click(function(e) {
e.preventDefault();
console.log("Clicked");
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-th-large">
</span>Hospital</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-asterisk link-item"></span>Hospital Member
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-th-large">
</span>Somiti</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-asterisk link-item">Somiti Member</span>
</td>
</tr>
</table>
</div>
</div>
</div>

I solve the issue as follow :
$(document).ready(function () {
$(".link-item").next().click(function(e) {
var currId = $(this).closest(".collapse").attr("id");
localStorage.setItem("currItem", currId);
});
$("#" + localStorage.getItem("currItem")).collapse('show')
})

How can Input and Select filters work together?

I have two filters in my page one is an <input> to make a global search and the other is a <select> element to make a category search. Each filter Works fine individually but they don't work together so How can I make that the both of them work together?.
I already tried to put all in one function but didn't Works.
EDIT: This is how the code looks after the solution Jsfiddle
$('textarea').summernote({
toolbar: false,
disableDragAndDrop: true,
});
$('#search').keyup(function() {
var term = $(this).val();
if (term != '') {
$('.panel').not('.note-editor').hide();
$('.panel').not('.note-editor').filter(function() {
return $(this).text().toLowerCase().indexOf(term.toLowerCase()) > -1
}).show();
} else {
$('.panel').show();
}
});
$('#list-filter').change(function() {
var term = $('#list-filter :selected').text();
if (term != ('' || 'Categories')) {
$('.panel').not('.note-editor').hide();
$('.panel').not('.note-editor').filter(function() {
return $(this).find('span.category').text().toLowerCase().indexOf(term.toLowerCase()) > -1
}).show();
} else {
$('.panel').show();
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.16/summernote.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.16/summernote.js"></script>
<br />
<div class="row">
<span class="col-xs-4">
<span class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</span>
<input class="form-control" id="search" type="text" name="search" placeholder="Search" />
</span>
</span>
<span class="col-xs-4">
<select id="list-filter" class="form-control">
<option value="" selected="selected">Categories</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
</span>
</div>
<br />
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#one"><strong>One</strong></a>
<span class="pull-right category">
Category: First
</span>
</h4>
</div>
<div id="one" class="panel-collapse collapse">
<div class="panel-body">
<textarea disabled>
Lorem
</textarea>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#two"><strong>Two</strong></a>
<span class="pull-right category">
Category: Second
</span>
</h4>
</div>
<div id="two" class="panel-collapse collapse">
<div class="panel-body">
<textarea disabled>
ipsum
</textarea>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#three"><strong>Three</strong></a>
<span class="pull-right category">
Category: Third
</span>
</h4>
</div>
<div id="three" class="panel-collapse collapse">
<div class="panel-body">
<textarea disabled>
Maecenas First
</textarea>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#fourth"><strong>Four</strong></a>
<span class="pull-right category">
Category: First
</span>
</h4>
</div>
<div id="fourth" class="panel-collapse collapse">
<div class="panel-body">
<textarea disabled>
Vestibulum
</textarea>
</div>
</div>
</div>
</div>

Move the filtering out to a separate function, and call it from both event handlers. It can then get the values from both filtering fields, and check them both.
$('textarea').summernote({
toolbar: false,
disableDragAndDrop: true,
});
function filter() {
var search = $("#search").val().toLowerCase();
var listterm = $("#list-filter :selected").text().toLowerCase();
if (listterm == 'categories') {
listterm = '';
}
if (search != '' || listterm != '') {
$(".panel:not(.note-editor)").hide().filter(function() {
var show = true;
var thistext = $(this).text().toLowerCase();
if (search != '' && thistext.indexOf(search) == -1) {
show = false;
} else if (listterm != '' && thistext.indexOf(listterm) == -1) {
show = false;
}
return show;
}).show();
}
}
$('#search').keyup(filter);
$('#list-filter').change(filter);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.16/summernote.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.16/summernote.js"></script>
<br />
<div class="row">
<span class="col-xs-4">
<span class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</span>
<input class="form-control" id="search" type="text" name="search" placeholder="Search" />
</span>
</span>
<span class="col-xs-4">
<select id="list-filter" class="form-control">
<option value="" selected="selected">Categories</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
</span>
</div>
<br />
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#one"><strong>One</strong></a>
<span class="pull-right category">
Category: First
</span>
</h4>
</div>
<div id="one" class="panel-collapse collapse">
<div class="panel-body">
<textarea disabled>
Lorem
</textarea>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#two"><strong>Two</strong></a>
<span class="pull-right category">
Category: Second
</span>
</h4>
</div>
<div id="two" class="panel-collapse collapse">
<div class="panel-body">
<textarea disabled>
ipsum
</textarea>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#three"><strong>Three</strong></a>
<span class="pull-right category">
Category: Third
</span>
</h4>
</div>
<div id="three" class="panel-collapse collapse">
<div class="panel-body">
<textarea disabled>
Maecenas First
</textarea>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#fourth"><strong>Four</strong></a>
<span class="pull-right category">
Category: First
</span>
</h4>
</div>
<div id="fourth" class="panel-collapse collapse">
<div class="panel-body">
<textarea disabled>
Vestibulum
</textarea>
</div>
</div>
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

How to remove the duplicate values in textbox - javascript

wrap your checkedfields.push($(this).val()) line inside a condition like if(checkedfields.indexOf($(this).val())==-1){ checkedfields.push($(this).val()); }

Related

How do you get this div element to appear after button.addEventListener is pressed?

Accordion, how to automatically collapse one and expand next

Nested bootstrap collapse onclick event

Calling a function by a specific div's elements is not working in jQuery

How can Input and Select filters work together?

Categories

Resources