We Keep Coding

Displaying elements based on search

I would like the .box elements to show/hide based on the words the user searches for, so for example if a user types in 'Title2 Title1' because those words exists inside box one and two they will remain visible with the renaming .box elements hiding. All the text within the .box elements needs to be searchable not just that in the .title element.
Below is how far I've got. It's almost there but it's not quite working as hoped.
Any help would be great.
Many thanks.
<input placeholder="Search" id="search" type="text" />
<div class="box">
<div class="title">Box Title1</div>
<div class="content">
Box title one content
</div>
</div>
<div class="box">
<div class="title">Box Title2</div>
<div class="content">
Box title two content
</div>
</div>
<div class="box">
<div class="title">Box Title3</div>
<div class="content">
Box title three content
</div>
</div>
<script>
$("#search").on("input", function () {
var search = $(this).val();
if (search !== "") {
var searchArray = search.split(" ");
searchArray.forEach(function(searchWord) {
$(".box").each(function () {
if($(this).is(':contains('+ searchWord +')')) {
$(this).show();
} else {
$(this).hide();
}
});
});
} else {
$(".box").show();
}
});
</script>

You need to use a different search method. :contains does not work as you expect. Consider the following example.
$(function() {
function filter(e) {
var term = $(e.target).val();
if (term.length < 3) {
$(".box").show();
return;
}
$(".box").each(function(i, el) {
if ($(".content", el).text().indexOf(term) >= 0) {
$(el).show();
} else {
$(el).hide();
}
});
}
$("#search").keyup(filter);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder="Search" id="search" type="text" />
<div class="box">
<div class="title">Box Title1</div>
<div class="content">Box title one content</div>
</div>
<div class="box">
<div class="title">Box Title2</div>
<div class="content">Box title two content</div>
</div>
<div class="box">
<div class="title">Box Title3</div>
<div class="content">Box title three content</div>
</div>
So for example if on is entered, no filtering is performed. If one is entered, the script will look inside the content class of each box and if one is found in the text, it will be shown otherwise, it is hidden. If the User clears their search out, all items are shown.

Hide all box before iterate, then only show when match any words:
$("#search").on("input", function () {
var search = $(this).val();
if (search !== "") {
var searchArray = search.split(" ");
// Hide all .box
$(".box").each(function () {
$(this).hide();
})
searchArray.forEach(function(searchWord) {
$(".box").each(function () {
if($(this).is(':contains('+ searchWord +')') ) {
$(this).show();
}
});
});
} else {
$(".box").show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder="Search" id="search" type="text" />
<div class="box">
<div class="title">Box Title1</div>
<div class="content">
Box title one content
</div>
</div>
<div class="box">
<div class="title">Box Title2</div>
<div class="content">
Box title two content
</div>
</div>
<div class="box">
<div class="title">Box Title3</div>
<div class="content">
Box title three content
</div>
</div>

Loop through all .boxs and using regex pattern matching, check either the title or content matches the search query. Show all matched boxes and hide all others
I have also fiddled it here
$("#search").on("input", function () {
var searchables=$('.box');
console.log(searchables)
var query=$(this).val();
searchables.each(function(i,item){
var title=$(item).find('.title').text();
var content=$(item).find('.content').text();
var rgx=new RegExp(query,'gi');
if(rgx.test(title) || rgx.test(content))
{
$(item).show();
}
else
{
$(item).hide();
}
})
})

able to Select and deselect multiple elements in html and keep track of what has been selected

My HTML template will be appended many times depending upon the backend. So, I want to select the topics and send the id of selected elements. How to do it?
Right now I can only select and also after that i can't de-select it too.
Help!!
My Jquery code to select:
$(document.body).click(function(evt){
var clicked = evt.target;
var currentID = clicked.id || "No ID!";
document.getElementById(currentID).style.backgroundColor = "#00afbc";
//$(clicked).html(currentID);
})
My Html code:
<div class="container-fluid" id="container-<%=no%>">
<div id="circle" style="background:<%= colorCode %>;" class="col-xs-3">
<div class="text" style="color:<%= textColor %>;">
<%=p ercent %>
</div>
<div class="percent" style="color:<%= textColor %>;">%</div>
</div>
<div id="sideText">
<div class="checkbox col-xs-9 everything-checkbox">
<!--input type="checkbox" class="toggle" /-->
<div id="currentID">
<%=currentID %>
</div>
<div id="question">
<%=t otalQues %> Questions Attempts
</div>
</div>
</div>
</div>
<hr style="width: 100%; color: #d9d9d9; height: 1px; background-color:#d9d9d9; margin-top:0px;margin-bottom:0px;" />

You can just add and remove a class to keep track of the selected items and then just get all the selected items with an ID
$(document).ready(function () {
$(document.body).click(function (evt) {
var clicked = evt.target;
if (!$(clicked).hasClass('selected')) {
$(clicked).addClass('selected');
$(clicked).css('background-color', '#00afbc');
} else {
$(clicked).removeClass('selected');
$(clicked).css('background-color', '');
}
});
});
function getSelected() {
var ids = [];
$('.selected').each(function () {
var id = $(this).attr('id');
if (id) {
ids.push($(this).attr('id'));
}
});
return ids;
}

BeginCollectionItem Maintain Page Position MVC 5

I'm trying to find the best method (any at this point) in which to keep page scroll position when deleting an item from a list using beginCollectionItem.
Initially I thought it was due to my other javascript/jQuery code in my main project (it still could be a factor), but when I recreated the situation in a new project only using the BCI code (index, two partials, controller, and model), when deleting an item from either of the lists, the page would jump to the top again, I really need (want) this to stop, how can I achieve this?
I have seen this question and the top answer I don't know how to properly implement or even if it's still valid, the second answer, using the below JS I have tested within my _Layout, within the budles which didn't fix the issue.
jQuery test
$(document).scroll(function () {
localStorage['page'] = document.URL;
localStorage['scrollTop'] = $(document).scrollTop();
});
$(document).ready(function () {
if (localStorage['page'] == document.URL) {
$(document).scrollTop(localStorage['scrollTop']);
}
});
Student Partial
#model UsefulCode.Models.Person
<div class="editorRow">
#using (Html.BeginCollectionItem("students"))
{
<div class="ui-grid-c ui-responsive">
<div class="ui-block-a">
<span>
#Html.TextBoxFor(m => m.firstName)
</span>
</div>
<div class="ui-block-b">
<span>
#Html.TextBoxFor(m => m.lastName)
</span>
</div>
<div class="ui-block-c">
<span>
<span class="dltBtn">
X
</span>
</span>
</div>
</div>
}
</div>
Teacher Partial
#model UsefulCode.Models.Person
<div class="editorRow">
#using (Html.BeginCollectionItem("teachers"))
{
<div class="ui-grid-c ui-responsive">
<div class="ui-block-a">
<span>
#Html.TextBoxFor(m => m.firstName)
</span>
</div>
<div class="ui-block-b">
<span>
#Html.TextBoxFor(m => m.lastName)
</span>
</div>
<div class="ui-block-c">
<span>
<span class="dltBtn">
X
</span>
</span>
</div>
</div>
}
</div>
Index
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
#model UsefulCode.Models.Register
<div id="studentList">
#using (Html.BeginForm())
{
<div id="editorRowsStudents">
#foreach (var item in Model.students)
{
#Html.Partial("StudentView", item)
}
</div>
#Html.ActionLink("Add", "StudentManager", null, new { id = "addItemStudents", #class = "button" });
}
</div>
<div id="teacherList">
#using (Html.BeginForm())
{
<div id="editorRowsTeachers">
#foreach (var item in Model.teachers)
{
#Html.Partial("TeacherView", item)
}
</div>
#Html.ActionLink("Add", "TeacherManager", null, new { id = "addItemTeachers", #class = "button" });
}
</div>
#section scripts {
<script type="text/javascript">
$(function () {
$('#addItemStudents').on('click', function () {
$.ajax({
url: '#Url.Action("StudentManager")',
cache: false,
success: function (html) { $("#editorRowsStudents").append(html); }
});
return false;
});
$('#editorRowsStudents').on('click', '.deleteRow', function () {
$(this).closest('.editorRow').remove();
});
$('#addItemTeachers').on('click', function () {
$.ajax({
url: '#Url.Action("TeacherManager")',
cache: false,
success: function (html) { $("#editorRowsTeachers").append(html); }
});
return false;
});
$('#editorRowsTeachers').on('click', '.deleteRow', function () {
$(this).closest('.editorRow').remove();
});
});
</script>
}

Aside from inflicting pain to myself for how dense I now feel I am relieved.
Adding return false; to the delete action resolves this, it was present on the add action but from staring at it for hours I just assumed it was there.
If there is a better answer, please put it in as this will only work on this section of code.
Below is the answer code:
$('#addItemStudents').on('click', function () {
$.ajax({
url: '#Url.Action("StudentManager")',
cache: false,
success: function (html) { $("#editorRowsStudents").append(html); }
});
return false;
});
$('#editorRowsStudents').on('click', '.deleteRow', function () {
$(this).closest('.editorRow').remove();
return false; // add this
});

Generate a random class and read with regex in jQuery

So I make this little kind of game. There are 7 switches that trigger other buttons on click to toggleClass 'on' which is defined in jQuery.
The Goal is to get all buttons to the state 'on'.
The problem is, you can easily right-click, choose Inspect Element, add the class 'on' and win the game.
So I need to make the classes for these switches random. E.g. 'on-214124712', 'on-307153821369' or 'on-6471649031264'. But they have to share the same prefix which is 'on-'.
How can I generate them differently with every click? And how can I still toggleClass and check hasClass them using regex?
HTML:
<h2>You clicked <span id="output">0</span> times</h2>
<div class="switches">
<div id="switch1" class="switch"></div>
<div id="switch2" class="switch on"></div>
<div id="switch3" class="switch on"></div>
<div id="switch4" class="switch"></div>
<div id="switch5" class="switch on"></div>
<div id="switch6" class="switch on"></div>
<div id="switch7" class="switch"></div>
</div>
Javascript:
var count = 0;
$('.switch').click(function () {
$('#output').html(function (i, val) {
return val * 1 + 1
});
});
$("#switch1").bind("click", function () {
$(this).toggleClass("on");
$('#switch3').toggleClass("on");
$('#switch5').toggleClass("on");
$('#switch6').toggleClass("on");
count++;
});
$("#switch2").bind("click", function () {
$(this).toggleClass("on");
$('#switch1').toggleClass("on");
$('#switch3').toggleClass("on");
$('#switch7').toggleClass("on");
count++;
});
$("#switch3").bind("click", function () {
$(this).toggleClass("on");
$('#switch2').toggleClass("on");
$('#switch5').toggleClass("on");
count++;
});
$("#switch4").bind("click", function () {
$(this).toggleClass("on");
//$('#switch1').toggleClass("on");
$('#switch2').toggleClass("on");
$('#switch5').toggleClass("on");
count++;
});
$("#switch5").bind("click", function () {
$(this).toggleClass("on");
$('#switch1').toggleClass("on");
$('#switch4').toggleClass("on");
count++;
});
$("#switch6").bind("click", function () {
$(this).toggleClass("on");
$('#switch3').toggleClass("on");
$('#switch5').toggleClass("on");
$('#switch7').toggleClass("on");
count++;
});
$("#switch7").bind("click", function () {
$(this).toggleClass("on");
$('#switch3').toggleClass("on");
$('#switch4').toggleClass("on");
count++;
});
$('.switches').click(function () {
if ($("#switch1").hasClass("on") && $("#switch2").hasClass("on") && $("#switch3").hasClass("on") && $("#switch4").hasClass("on") && $("#switch5").hasClass("on") && $("#switch6").hasClass("on") && $("#switch7").hasClass("on")) {
alert('Success!');
}
});
Thanks!

UPDATE
You can use this selector that checks if the element has a class that contains the desired string (check the updated demo):
$('.switch[class*=on-]').addClass('red');
Each div that has a class that contains on will get red
$('.switch[class*=on-]').addClass('red');
.red { color:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="switches">
<div id="switch1" class="switch">test</div>
<div id="switch2" class="switch on-9876597856978">test</div>
<div id="switch3" class="switch on-jhg675">test</div>
<div id="switch4" class="switch">test</div>
<div id="switch5" class="switch on-876uyg">test</div>
<div id="switch6" class="switch on-kjhg76gt9">test</div>
<div id="switch7" class="switch">test</div>
</div>

Need help with jQuery click function

Hey guys, I have a simple question (hope is simple). I have created sort of an accordion but I need to something like if button is clicked, slide down the content and else if button is clicked again slide up the content, please find below what I have done so far. Thanks for your help in advance.
$('#experiences').click(function () {
var cb = function () {
$('#experiences').addClass('active');
$('#hiddenExperiences').slideDown();
$('#addExperiences').fadeIn();
return false;
}
closeFilters(cb);
return false;
});
$('.btn-close').click(function () {
var cb = function () {
return false;
};
closeFilters(cb);
return false;
});
function closeFilters(callbackFunc) {
$(".active").removeClass("active");
$(".add-filters").fadeOut(250);
$(".hidden-filters").slideUp("slow", callbackFunc);
}
<div class="heading" id="experiences">
<p>Experiences</p>
</div><!--heading-->
<div class="filter">
<div class="hidden-filters" id="hiddenExperiences">
<p>Filtering by:</p>
<ul class="curr-filter"></ul>
</div><!-- hidden-filters -->
<div class="add-filters extra-width" id="addExperiences">
<div class="inner">
<h4 class="title-filtery">Filtery By:</h4>
<div class="btn-holder clearfix">
<input type="button" class="btn-update" value="" />
</div>
</div>
</div><!-- filters -->
</div><!-- filter -->

See this method
http://api.jquery.com/slideToggle/
and this event
http://api.jquery.com/toggle-event/

You can perform this in Javascript onClick of the button something like this:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == "inline") {
e.style.display = 'none';
}
else if(e.style.display == "none") {
e.style.display = "inline";
}
}

Looks like you're adding the .active class to all elements with id=experiences
$('#experiences').addClass('active');
You need to find the element that got clicked and pass that through.
var tgt;
$('#experiences').click(function (event) {
tgt = $(event.target);
var cb = function () {
$(tgt).addClass('active');
$('#hiddenExperiences').slideDown();
$('#addExperiences').fadeIn();
return false;
}
closeFilters(cb);
return false;
});
I'm not sure how your expand works, but that's where you're going to need to look.

I used this is another project I was doing, it may be of some assistance
JS:
$('.container .ui-widget-header').click(function(){$(this).parent().children('.ui-widget-content').slideToggle()});
HTML:
<div class="container">
<div class="ui-widget-header">Title</div>
<div class="ui-widget-content">Content</div>
</div>
<div class="container">
<div class="ui-widget-header">Title2</div>
<div class="ui-widget-content">Content2</div>
</div>