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();
}
})
})
Related
Currently, I am able to search for a hall by typing anything that is within a hall container (including name, location, capacity), however, I only want to be able to filter results for searches for a hall name.
<div id="searchFilter" class="flexColumn">
<label for="searchFilterText">Search for Community Halls</label>
<input type="text" id="searchFilterText" placeholder="Search for the name of a community hall">
</div>
`<div class="hall">
<div class="info">
<p>${data.Halls[halls[i]].Location[0].Address}, ${data.Halls[halls[i]].Location[1].Suburb}<br>Capacity: ${data.Halls[halls[i]].Room[0]["Standing Capacity"]}</p>
</div>
<div class="image">
<img class="img" src="${data.Halls[halls[i]].Description[4].Photos}" alt="${data.Halls[halls[i]]["Hall Name"]}">
</div>
<div class="hallNameBox">
<p class="hallName">${data.Halls[halls[i]]["Hall Name"]}</p>
</div>
</div>`;
$(document).ready(function(){
$("#searchFilterText").on("keyup", function() {
let value = $(this).val().toLowerCase();
$(".hall").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Instead of using toggle use show and hide.
(Use one, two, or three to test this reduced example).
$(function() {
$("#searchFilterText").on('keyup', function() {
// Grab the value
const value = $(this).val().toLowerCase();
// If it's not empty
if (value) {
// `filter` all the hall elements if
// the text of the hallName element doesn't start with
// the value and hide them
$('.hall').filter(function() {
const text = $(this).find('.hallName').text().toLowerCase();
return !text.startsWith(value);
}).hide();
// Otherwise show them
} else {
$('.hall').show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="searchFilter" class="flexColumn">
<input type="text" id="searchFilterText" />
</div>
<div class="hall">
<div class="hallNameBox">
<p class="hallName">One</p>
</div>
</div>
<div class="hall">
<div class="hallNameBox">
<p class="hallName">Two</p>
</div>
</div>
<div class="hall">
<div class="hallNameBox">
<p class="hallName">Three</p>
</div>
</div>
$(document).ready(function(){
$("#searchFilterText").on("keyup", function() {
let value = $(this).val().toLowerCase();
$(".hall *").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Is this what you want? If not, let me know.
I have some javascript function - shows me a popup with some texts. I try to rotate two "section" elements, but if I add to HTML one more section with class custom, the page shows only first element. Please, help me to add 1-2 more elements and to rotate it. The idea is to have 2 or more elements with class custom and to show it in random order, after last to stop. Thanks.
setInterval(function () {
$(".custom").stop().slideToggle('slow');
}, 2000);
$(".custom-close").click(function () {
$(".custom-social-proof").stop().slideToggle('slow');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="custom">
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="checkbox.png">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
Some Text
</p>
</div>
</div>
<div class="custom-close"></div>
</div>
</section>
Set section display none of page load instead of first section. Check below code of second section:
<section class="custom" style=" display:none">
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="checkbox.png">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
Mario<br>si kupi <b>2</b> matraka
<small>predi 1 chas</small>
</p>
</div>
</div>
<div class="custom-close"></div>
</div>
</section>
And you need to make modification in your jQuery code as below:
setInterval(function () {
var sectionShown = 0;
var sectionNotShown = 0;
$(".custom").each(function(i){
if ($(this).css("display") == "block") {
sectionShown = 1;
$(this).slideToggle('slow');
} else {
if (sectionShown == 1) {
$(this).slideToggle('slow');
sectionShown = 0;
sectionNotShown = 1;
}
}
});
if (sectionNotShown == 0) {
$(".custom:first").slideToggle('slow');
}
}, 2000);
Hope it helps you.
I have element like this :
<input type="text" onkeyup="filter()" id="filter_data">
<div id="body">
<div class="child"> Text 1 </div>
<div class="child"> Text 2 </div>
<div class="child"> Text 1 </div>
</div>
I want to search the div text by input value.
I can search the data but.. how to show "data Not found" inside div body, if all child div is not have any data like input value.
This my fiddle.
Working fiddle.
You could add an increment a variable (result in my example) to know if there's any data found or not then show/hide the message :
if( result === 0 ){
$('.empty_div').removeClass('hide');
}else{
$('.empty_div').addClass('hide');
}
function filter() {
var value = $('#filter_data').val();
var div_class = $('#body').find(".child");
var result = 0;
div_class.hide();
div_class.each(function() {
if ($(this).text().toUpperCase().indexOf(value.toUpperCase()) != -1) {
$(this).show();
result++;
}
});
if (result === 0) {
$('.empty_div').removeClass('hide');
} else {
$('.empty_div').addClass('hide');
}
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" onkeyup="filter()" id="filter_data">
<div id="body">
<div class="child"> Text 1 </div>
<div class="child"> Text 2 </div>
<div class="child"> Text 1 </div>
<div class="empty_div hide">No Data Found</div>
</div>
Add one more div and fiddle: https://jsfiddle.net/thecreativedev/0k8ustrv/62/
JS
function filter() {
var value = $('#filter_data').val();
var div_class = $('#body').find(".child");
$('.nomatched').html('').hide();
div_class.hide();
var i =0;
div_class.each(function() {
if ($(this).text().toUpperCase().indexOf(value.toUpperCase()) != -1) {
$(this).show();
++i;
}
});
if(i == 0){
$('.nomatched').html('No matched data Found').show();
}
}
HTML
<input type="text" onkeyup="filter()" id="filter_data">
<div id="body">
<div class="child"> Text 1 </div>
<div class="child"> Text 2 </div>
<div class="child"> Text 1 </div>
<div class="nomatched" style="display:none"></div>
</div>
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;
}
The sidebar is hidden and it will fadeIn once I have submitted the correct pin. But when I click any option in the sidebar more than once it is hiding! Why?
var pin = 1234;
$("#confirm_pin").click(function () {
var pin = document.getElementById("Pin").value;
if (pin == 1234) {
alert("You have now acesss!");
$(".management").hide();
$(".management_sidebar").fadeIn();
} else {
alert("Please, enter the correct pin");
}
});
$(".option_management").on("click", function () {
$(".page_holder_management").children().hide();
var option = $.trim($(this).text());
var find_click_object = $(this).attr("id");
if (option == "Home page") {
$("div.page_holder_management > div:nth-child(1)").fadeIn();
} else {
alert("false");
}
});
HTML
<div class="management_sidebar" style="display:none;">
<div class="header_management_sidebar">
<p style="position:absolute; margin:10px; font-weight:bold;"> Site administration </p>
</div>
<div id="management_content" STYLE="margin:20px; color:black;">
<div class="box_management">
<div class="option_management" id="1">Home page</div>
<div class="option_management" id="2">Table page</div>
<div class="option_management"> test </div>
<div class="option_management"> test </div>
</div>
</div>
</div>
<div class="page_holder_management">
<div class="management_homePage" style="display:none;">
<div class="header_management_homePage">
<p style="position:absolute; margin:10px; color:black; font-weight:bold;"> Change home page </p>
</div>
</div>
<div class="management_tablePage" style="display:none;">
<div class="header_management_homePage">
<p style="position:absolute; margin:10px; color:black; font-weight:bold;"> Change table page </p>
</div>
</div>
</div>
In the html code I made pages that should fadeIn when I click on any option in the sidebar and it should fadeOut when i click another option with another page should fadeIn!
Please tell me where I am doing wrong?
PLease check this http://kapten.mzzhost.com/test/System_management.php to test my problem! The pin is: 1234
Check the fiddle, you should make html and js relations simpler. I used data attributes there and if i understand correctly, this is what you want
var pin = 1234;
$("#confirm_pin").click(function () {
var pin = document.getElementById("Pin").value;
if (pin == 1234) {
alert("You have now acesss!");
$(".management").hide();
$(".management_sidebar").fadeIn();
} else {
alert("Please, enter the correct pin");
}
});
$(".option_management").on("click", function () {
var target = $(this).data('target');
$('.contents').hide();
$('.contents.' + target).fadeIn();
});
html changes with data attribute
<div class="option_management" data-target="management_homePage" id="1">Home page</div>
<div class="option_management" data-target="management_tablePage" id="2">Table page</div>